jQuery lightBox customization

jQuery lightBox customization 02.12.2008. u 16:00 · pre 218 meseci #1

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...

ovako.jpg68.49k

Re: jQuery lightBox customization 02.12.2008. u 17:19 · pre 218 meseci #2

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)...

Potpis

rafforum.rs - Forum Računarskog Fakulteta

Re: jQuery lightBox customization 03.12.2008. u 11:42 · pre 218 meseci #3

Hvala na detaljnom odgovoru, ipak ovo mi nece previse pomoci iako je skroz simple za implementaciju.
Naime mora lightbox...

Re: jQuery lightBox customization 03.12.2008. u 14:17 · pre 218 meseci #4

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...)

Potpis

rafforum.rs - Forum Računarskog Fakulteta

Re: jQuery lightBox customization 03.12.2008. u 21:20 · pre 218 meseci #5

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...

Re: jQuery lightBox customization 03.12.2008. u 22:02 · pre 218 meseci #6

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...

Potpis

rafforum.rs - Forum Računarskog Fakulteta

Re: jQuery lightBox customization 04.12.2008. u 21:20 · pre 218 meseci #7

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 ?

Re: jQuery lightBox customization 04.12.2008. u 21:54 · pre 218 meseci #8

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...

Potpis

rafforum.rs - Forum Računarskog Fakulteta

Re: jQuery lightBox customization 04.12.2008. u 22:05 · pre 218 meseci #9

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.

Re: jQuery lightBox customization 04.12.2008. u 23:22 · pre 218 meseci #10

hmm... sad si mi dao ideju sa plugin :)

Potpis

rafforum.rs - Forum Računarskog Fakulteta

Re: jQuery lightBox customization 05.12.2008. u 13:27 · pre 217 meseci #11

Izgleda da bas volis da kodiras :D
Rado cu da ga testiram i eventualno pomognem u jos necemu ako budem imao vremena...

Re: jQuery lightBox customization 05.12.2008. u 14:38 · pre 217 meseci #12

pa volim javascript a obozavam jquery :)

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

Potpis

rafforum.rs - Forum Računarskog Fakulteta

Forum kao aplikacija na telefonu

Srodne teme