JQuery İle Efektli, Kategorili Resim Listesi Yapma

Bu örneğimizde jquery ile kategorili efektli şık bir resim listesi yapmayı göreceğiz siz projenize göre dinamik olarak türetebilirsiniz istediğiniz kadar.

jQuery ile efektli kategorili resim listesi yapma

Başlamadan önce örneğimiz jquery ile yapıldığından jquery kütüphanesini “head” etiketleri arasına alttaki kodu eklemeniz gerekmektedir. İsterseniz jquery’nin daha yeni versiyonunuda kullanabilirsiniz.

Öncelikle yapacağımız örneğin son hali şu şekilde olacak.

Şimdi örneğimizi kodlamaya başlayalım.

HTML Kodları

Üstteki html kodlarımızın bazı kısımlarından bahsetmek istiyorum burada önemli olan noktalardan biri “li” etiketlerindeki “rel” özelliğidir bu özlelliğin değerini jquery ile alıp gösterilecek resimleri ayarlıyoruz örnek olarak “rel” özelliğinin değeri “all” olan “li” etiketi tıklandığında tüm kayıtlar gösterilmektedir veya “rel” özelliğinin değeri “jquery” olan li etiketine tıklandığında “ul” elementi altındaki “rel” özelliği “jquery” olan “li” etiketleri kalacak diğer “li” etiketleri gizlenecektir.

CSS Kodları

Üstteki css kodlarımız ile menü ve resim listesi ile ilgili görsel düzenlemeler yapıldı.

Jquery Kodu

jquery kodlarımızda animate fonksiyonu ile elementlere efektler uygulayabiliyoruz bu efektler css kodları ile yapılmaktadır. örnek bir nesnenin boyutu 100px bunu 250px’e animate fonksiyonu ile yaptığımızda animasyonlu bir şekilde büyümesi sağlanacaktır stop() fonksiyonunu yerine göre kullanmanızı şiddetle tavsiye ederim neneni ise düşünün bir kategoriye tıkladıktan sonra animate ile efektler uygulanıyor ama siz hiç beklemeden başka bir kategoriye tıkladınız önceki tıkladığınızda çalışan animate fonksiyonu bitmeden sonraki tıklamanız devreye girmeyecektir işte stop() fonksiyonu burada imdadımıza yetişiyor önceki fonksiyonun işlevinin durdurup sonrakida işlemimize direk başlamış oluyoruz.

Sonuç

Bunlar da hoşunuza gidebilir...

Bir Cevap Yazın