Lightbox galeri için rel etiketinde galerinin grubunu tanımladım. Ancak w3c validator kontrolünde aşağıdaki hatayı aldım. Normalde rel etiketinde kullanılabilecek tag bellidir. Bunlardan farklı bir tag kullanırsak hata alabiliriz. Önemli bir hata olmasa da çözülemeyecek bir hata değil.
Hata: Bad value productgallery for attribute rel on element a: The string productgallery is not a registered keyword.
Rel etiketinde kullanılabilecek taglar için tıklayınız.
Çözüm olarak rel etiketini tanımladığım yere data-rel=”productgallery” şeklinde bir tanımlama yaptım. Data etiketi jquery ile çekip işlem yapacağız.
Farklı etikete sahip birde fazla tag tanımlayabilirsiniz. Örneğin: data-rel=”_blank nofollow” burada_blank tagı target=”” etiketi içine, nofollow ise rel etiketi içine yazılacak.
Html kodu:
<a href="#" data-rel="_blank nofollow"> ... </a>
Aşağıdaki kodu lightbox fonksiyonundan önce yazınız.
Js kodu:
(function($){
$("a[data-rel]").each(function() { // a[data-rel] tanımlı etiketleri çekiyoruz
var rel_data = $(this).attr("data-rel").split(' '); // birden fazla tag eklenmiş ise Örnek: _blank nofollow
var attr_length = rel_data.length; // tanımlanan tag sayısı
for(i = 0; i < attr_length; i++){ // tanımlanan tag sayısı kadar işlem yapıyoruz
if(rel_data[i] == "_blank"){ // eğer _blank ise target etiketini ekle
$(this).attr("target",rel_data[i]);
}else{ // eğer değil ise rel etiketini ekle
$(this).attr("rel",rel_data[i]);
}
}
});
})(jQuery);
Sorularınızı yorumda belirtebilirsiniz.
Herkese iyi çalışmalar