Merhabalar, uzun bir aradan sonra JQuery’nin kurtarıcı olduğu bir hikaye ile karşınızdayım. Aslında burada çok az kod paylaşacağım ama bu tip bir sorunla karşılaşanlar için iyi bir çözüm olacağına eminim. Hem de kodaman yapısına çok uygun olacak bir paylaşım olduğunu düşünüyorum.Hikayemiz şöyle : bir paket e-ticaret sitesi kullanıyoruz ve tema yönetim sistemi var ancak sadece istemci taraflı kodlara yani css html vs javascript müdahele edebiliyoruz. hazır bir paket olduğu için sunucu tarafında kod değiştirme gibi gereksinimler tam bir çile oluyor ve paketi satan firmamız ya değişikliklere ek ve biraz da yüksek ücretler, yada bu bir paket sistem o tarz birşey eklemeyiz gibi cevaplar veriyorlar.yine bu tip sorunların birisinde normalde js popup olarak açılan resimlerimizi lightbox ile açmamız gerekiyordu. sunucu taraflı kodlara ulaşamadığımız için js tarafında çözmek gerekti. ancak sıralı resimlerdeki onclick kodlarını temizlemek, bazı sınıflarını silmek, rel özelliklerine ulaşıp değiştirebilmek ve bazı silinecek kısımları da jquery ile gizlememiz gerkeiyordu.Açıkcası başta oldukça korkutucu görünmüştü çünkü her üründe birden çok resim vardı. döngüyle falan uğraşacağımı zannetmiştim. ama ilerledikçe kodlarım basitleştikçe basitleşti ve neredeyse 3-5 satır kod ile bu işi halletmiş oldum. hem de ürün temasında olduğu için tüm ürünlereotomatik olaraka eklenmiş oldu. sonuç harikaydı.//klasik ready fonksiyonumuzjQuery(document).ready(function () {//öncelikle standart javascrip ile değişen resimlerin onclick attribute’sini temizliyoruzjQuery(“td div a img”).removeAttr(“onClick”);// Magic zoom plugini kullanıldığı için resimdeki ona ait özellikleri siliyoruz.jQuery(“.MagicZoom”).removeAttr(“onMouseOver”);jQuery(“.MagicZoom”).removeAttr(“id”);jQuery(“.MagicZoom”).removeAttr(“name”);jQuery(“.MagicZoom”).removeAttr(“class”);//resmi büyüt popup açan butonumuzu sileceğiz ama paket firmamız bunu silmek istemiyormuş :)jQuery(“.UrunBilgisiUrunResimBuyutTd”).hide();//ilk açılan büyük resimdeki rel’i lightbox olarka açılması için değiştiriyoruzjQuery(“.MagicZoom”).attr(“rel”,”lightbox[res]”);//td div a içinde ufak resimlerimiz var. bunların bunlar link içinde olduğu için rel att. lightbox olarak ayarlamamız gerekiyordu.jQuery(“td div a”).attr(“rel”,”lightbox[res]”);//alert( jQuery(“td div a”).attr(“class”) );});
gördüğümüz gibi hiç bir sunucu koduna dokunmadan, paket satan firmaya bulaşmadan kendimizce güzel çözümler üretebildik. İşin bitmesi çok kısa sürdü ve JQuery’ye bir kez daha minnetar olduk. 🙂 ve şimdi daha neler yapabileceğimizi düşünmeye başladık.