Navigacija
Lista poslednjih: 16, 32, 64, 128 poruka.

jQuery lightBox customization

[es] :: Javascript i AJAX :: jQuery lightBox customization

[ Pregleda: 2235 | Odgovora: 11 ] > FB > Twit

Postavi temu Odgovori

Autor

Pretraga teme: Traži
Markiranje Štampanje RSS

Mister_rap
SE at Viacom

Član broj: 8822
Poruke: 2540
217.24.24.*

Jabber: mister_rap@jabber.com


+21 Profil

icon jQuery lightBox customization02.12.2008. u 15:00 - pre 142 meseci
Pozdrav,

Pricao sam sa krckom preko privatnih poruka i misljenja smo da tema moze biti od koristi i ostalima pa evo da vidimo sta mi je to potrebno....

Dakle kada korisnik klikne na neki thumb treba da dobije ovakav prozor:


Pri cemu se parametri za sliku (CATEGORY, DATE, TRENDS...) ucitavaju na osnovu njenog id-a sa nekog urla (recimo picture_info.jsp?id=some_id) Vidimo i download button, kada na njega korisnik klikne treba da mu u novom tabu otvori samu sliku bez lightbox-a...
Kako najlakse realizovati ovo...

Ps.
Koristim jquery-lightbox-0.5.js sa malim modifikacijama...
Prikačeni fajlovi
 
Odgovor na temu

Aleksandar Ružičić
Software Architect, Appricot d.o.o.
Beograd

Član broj: 26939
Poruke: 2881

Jabber: krckoorascic@gmail.com
Sajt: krcko.net


+44 Profil

icon Re: jQuery lightBox customization02.12.2008. u 16:19 - pre 142 meseci
ovo je mnogo lakse odraditi sa ThickBox-om, nego sa pomenutim lightboxom, tako da cu ja ovde dati primer kako bi to sto ti treba moglo da se uradi preko tog plugina, a ti reci ako bas mora lightbox pa cu ti dati resenje i za njega (cesce sam radio sa thick nego sa lightboxom)..

prvo ti treba jedan box koji ces da napunis podacima (slika + sta ti jos treba), on je nevidljiv i prikazuje se unutar thickbox prozora, recimo ovako nesto:
Code:

<div id="tb_content" style="display:none">
    <div class="image"><a href=""><img /></a></div>
    <div>param1: <span class="param1"></span></div>
    <div>param2: <span class="param2"></span></div>
    <div>param3: <span class="param3"></span></div>
</div>

znaci stavis sta god ti treba, samo ubacis par klasa da ti bude lakse posle da nalazis te elemente i da ih popunjavas

zatim koristis #TB_inline foru kod thickboxa da klikom na sliku ucitas ovaj "tb_content" div u thickbox:
Code:

<a href="#TB_inline?height=600&width=400&inlineId=tb_content&image_id=123" class="thickbox"><img src="thumb.png" width="100" height="60" /></a>

ja sam u ovaj link ubacio i image_id parametar na osnovu koga kasnije ucitavamo podatke...

i js koji je potreban:
Code:

$(function() {
   $('a.thickbox').click(function(){
      
     if ($(this).attr('href').match(/(?:\?|&)image_id=([0-9]+)(?:&|$)/i)) {

          var image_id = RegExp.$1;

          $.getJSON('image_info.php', {id: image_id}, function(data) {

              $('#TB_window .image a').attr('href', data.image_download_url);
              $('#TB_window .image img').attr('src', data.image_url);
              $('#TB_window .param1').text(data.param1);
              $('#TB_window .param2').text(data.param2);
              $('#TB_window .param3').text(data.param3);
          });
      }
   });
});

samo obrati paznju da sam trazio elemente unutar TB_window elementa a ne tb_content

i samo jos treba da napises image_info.php koji ce da ti vraca JSON sa potrebnim podacima


ovo ti je nesto na brzinu, sto sam mogao bez testiranja da ti dam, ako ti ovo resenje ne odgovara, ili mora lightbox onda cu ti uraditi to kad dodjem kuci (jos sam na poslu)...
 
Odgovor na temu

Mister_rap
SE at Viacom

Član broj: 8822
Poruke: 2540
*.raf.edu.yu.

Jabber: mister_rap@jabber.com


+21 Profil

icon Re: jQuery lightBox customization03.12.2008. u 10:42 - pre 142 meseci
Hvala na detaljnom odgovoru, ipak ovo mi nece previse pomoci iako je skroz simple za implementaciju.
Naime mora lightbox...
 
Odgovor na temu

Aleksandar Ružičić
Software Architect, Appricot d.o.o.
Beograd

Član broj: 26939
Poruke: 2881

Jabber: krckoorascic@gmail.com
Sajt: krcko.net


+44 Profil

icon Re: jQuery lightBox customization03.12.2008. u 13:17 - pre 142 meseci
ok, onda cu se igrati malo sa lightboxom kad dodjem danas sa posla (a mozda ukradem nesto vremena i na poslu, videcu), pa ces veceras imati resenje i za lightbox...


btw ne bi bilo lose da okacis ovde tu tvoju modifikovanu verziju ligthboxa, ili mi samo reci sta si menjao (ako si menjao samo izgled onda nema potrebe da kacis...)
 
Odgovor na temu

Mister_rap
SE at Viacom

Član broj: 8822
Poruke: 2540
93.86.139.*

Jabber: mister_rap@jabber.com


+21 Profil

icon Re: jQuery lightBox customization03.12.2008. u 20:20 - pre 142 meseci
Dizajneri su promenili izgled...
Ostalo sve sto je menjanjo odnosi se na settings (dodatne) varijable, tako da to mozes da zanemaris...

Tako da ce mi tvoje eventualno resenje ili neki predlog odgovarati u potpunosti...
 
Odgovor na temu

Aleksandar Ružičić
Software Architect, Appricot d.o.o.
Beograd

Član broj: 26939
Poruke: 2881

Jabber: krckoorascic@gmail.com
Sajt: krcko.net


+44 Profil

icon Re: jQuery lightBox customization03.12.2008. u 21:02 - pre 142 meseci
pogledao sam malo kod lightboxa i nazalost nema built-in event handlere (cime odstupa od "jquery fazona") tako da neka od funkcija mora da se overriduje, ja sam overridovao lightbox.start fju jer mi je nekako ona najpodesnija za to (mada verovatno nece da radi ako hoces da imas image set...)

elem, evo koda:
Code:

(function(){
    
    // cuvamo kopiju start f-je
    $.fn.lightbox._start = $.fn.lightbox.start;
    
    // overridujemo lightbox.start fju
    $.fn.lightbox.start = function(imageLink) {
    
        $(imageLink).lightbox._start(imageLink);    // pozivamo originalnu start f-ju
        
        // fetchujemo podatke (id slike je upisan u rel atributu A elementa)
        $.getJSON('image_info.php', {id: imageLink.rel}, function(data) {
        
          // punimo "polja" sa podacima:                    
          $('#lightbox .download').attr('href', data.image_url);
          $('#lightbox .param1').text(data.param1);
          $('#lightbox .param2').text(data.param2);
          $('#lightbox .param3').text(data.param3);
      });
    };
    
    // pozivamo lightbox za sve elemente sa lightbox klasom
    $(".lightbox").lightbox();
})();

image id sam dodao u rel atribut:
Code:

<a href="image-0.jpg" rel="123" class="lightbox"><img src="thumb-0.jpg" width="100" height="40" alt="" /></a>

ostalo je jedino da ubacis elemente koji ce da ti drze podatke negde unutar #lightbox diva, koliko sam shvatio ti to vec imas odradjeno tako da ja to nisam radio...
 
Odgovor na temu

Mister_rap
SE at Viacom

Član broj: 8822
Poruke: 2540
93.86.139.*

Jabber: mister_rap@jabber.com


+21 Profil

icon Re: jQuery lightBox customization04.12.2008. u 20:20 - pre 142 meseci
Jos jednom hvala na odgovoru,
Nisam implementirao tvoje resenje ali si mi dao ideju i resio sam problem za 3 min sa svega par linija koda.

Mislim da resenje nije bas elegantno ali bitno je da radi :D

Dakle nemam json ili bilo kakav drugi poziv iz lightbox fajla jer sada generisem kod koji izgleda ovako nekako:

Code:

<li>
<a href="/galleries/1228306871/Gothic_lolita_90lo.jpg"  title="Gothic_lolita_90lo" cat="Bags" date="July 08" trends="Urban">
<img src="/galleries/1228306871/Gothic_lolita_90lo-thumb.jpg" alt="" /></a>
</li>


nakon toga osnovni image array punim dodatnim atributima cat,date,trends...

Naravno imam divove za dinamiku i u metodi set image data samo kazem da pokupi informacije iz niza i iste setuje u odgovarajuce divove...

Ps.
radi odlicno sa image setovima sto mi je neophodno... Komentar ?
 
Odgovor na temu

Aleksandar Ružičić
Software Architect, Appricot d.o.o.
Beograd

Član broj: 26939
Poruke: 2881

Jabber: krckoorascic@gmail.com
Sajt: krcko.net


+44 Profil

icon Re: jQuery lightBox customization04.12.2008. u 20:54 - pre 142 meseci
zapravo tvoje resenje je elegantnije od mog u slucaju da ne povlacis neke velike podatke, a kako tebi treba samo par strignova relativno kratke duzine onda je tvoje resenje bolje.

samo bih ti ja preporucio da ne dodajes nestandardne atribute, to cat, date i trends. tj ako ne brines o validnosti markupa onda ostavi tako, a ako hoces da ti kod bude i validan mozes da strpas ta tri podatka u rel atribut i da ih razdvojis nekim separatorom, recimo ovako:
Code:

<a href="..." rel="Bags|July 08|Urban">...

i onda samo splitujes po pajpu...

Citat:
Mister_rap:
Ps.
radi odlicno sa image setovima sto mi je neophodno... Komentar ?

problem sa onim kodom sto sam ja predlozio je sto se overriduje start metoda koja se poziva samo jednom za image set (tako da dobijes samo id prve slike), verovatno bi bilo bolje da se overriduje changeImage fja ali onda ti ne bi bio dostupan DOMNode objekat pa bi morao id slike da cuvas na neki drugi nacin (recimo da dodas u putanju slike: image.jpg?id=123), ali je izvodljivo naravno...

u svakom slucaju drago mi je da si nasao resenje i to bolje za slucaj za koji tebi treba, a u slucaju da nekome treba nesto slicno samo sa dosta podataka po slici (recimo neki opis, komentari) onda mora da se koristi ajax...
 
Odgovor na temu

Mister_rap
SE at Viacom

Član broj: 8822
Poruke: 2540
93.86.139.*

Jabber: mister_rap@jabber.com


+21 Profil

icon Re: jQuery lightBox customization04.12.2008. u 21:05 - pre 142 meseci
Skroz jasno...
Totalna je glupost sto sam plugin nema podrsku za ovakve stvarcice!

Sistem za koji se koristi ovo je zatvorenog tipa tako da je validnosti markupa totalno nebitna.
 
Odgovor na temu

Aleksandar Ružičić
Software Architect, Appricot d.o.o.
Beograd

Član broj: 26939
Poruke: 2881

Jabber: krckoorascic@gmail.com
Sajt: krcko.net


+44 Profil

icon Re: jQuery lightBox customization04.12.2008. u 22:22 - pre 142 meseci
hmm... sad si mi dao ideju sa plugin :)
 
Odgovor na temu

Mister_rap
SE at Viacom

Član broj: 8822
Poruke: 2540
93.86.139.*

Jabber: mister_rap@jabber.com


+21 Profil

icon Re: jQuery lightBox customization05.12.2008. u 12:27 - pre 142 meseci
Izgleda da bas volis da kodiras :D
Rado cu da ga testiram i eventualno pomognem u jos necemu ako budem imao vremena...
 
Odgovor na temu

Aleksandar Ružičić
Software Architect, Appricot d.o.o.
Beograd

Član broj: 26939
Poruke: 2881

Jabber: krckoorascic@gmail.com
Sajt: krcko.net


+44 Profil

icon Re: jQuery lightBox customization05.12.2008. u 13:38 - pre 142 meseci
pa volim javascript a obozavam jquery :)

videcu sad za vikend da napravim nesto pa cu kacim ovde na es...
 
Odgovor na temu

[es] :: Javascript i AJAX :: jQuery lightBox customization

[ Pregleda: 2235 | Odgovora: 11 ] > FB > Twit

Postavi temu Odgovori

Navigacija
Lista poslednjih: 16, 32, 64, 128 poruka.