Normal bir kullanımda Lightbox veya alternatif bir javascript/jquery eklentisi kullanırken tıklandığında zoom etkisi oluşturmak istiyorsak, ilgili resimlere tek tek <a tagi vermek ve buna data-lightbox attribute’ ü de eklemek zorundayız.
Eğer veriler veritabanından veya başka bir veri kaynağından geliyorsa repeater veya döngü ile hepsine tek tek bu özelliği vererek çözüm üretmemiz mümkün. Peki kullanıcı/müşteri bir editör üzerinden resim yüklerse ve yeterli html bilgisi yoksa ne yapacağız ?
Farklı bir işleyiş var mı bilmiyorum ama sorunuma jQuery ile tam da istediğim gibi bir çözüm buldum. Yazdığım kod öncelikle istediğim div içerisindeki tüm img taglerine bakıyor. Eğer bu image’e kullanıcı elle link vermişse buna dokunmuyor, geri kalan tüm img tag lerine lightbox efektini ekliyor.
[javascript]<script type="text/javascript">
// document ready ile kodlarım çalışmadan önce sayfanın tamamen yüklenmesini bekliyorum…
$(document).ready(function () {
// sayfadetay ID si içerisinde bulunan tüm imageleri alıyorum. Dilerseniz sadece img yazarak sayfadaki tüm imagelere ulaşabilirsiniz.
var allImages = $(‘#sayfadetay img’);
// allImages ile aldığım tüm img tag leri içerisinde dönüyorum.
$(allImages).each(function () {
// Her bir image’in üst parent elemanına bakıp <a tag i olup olmadığını kontrol ediyorum, eğer yoksa kodlarım çalışıyor.
var tag = $(this).parent()[0].tagName;
if(tag != "A")
{
// Wrap komutunu kullanarak ilgili image’e bir <a tag i birde data-lightbox attribute ü ekliyorum.
var imageSrc = $(this).attr(‘src’);
$(this).wrap(‘<a href="’ + imageSrc + ‘" data-lightbox="haber"></a>’);
}
});
});
</script>[/javascript]
