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)...
jQuery lightBox customization
