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.
1 | <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"> |
Öncelikle yapacağımız örneğin son hali şu şekilde olacak.
Şimdi örneğimizi kodlamaya başlayalım.
HTML Kodları
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <ul class="menu"> <li class="selected"><a rel="all" href="#">Tümü</a></li> <li><a rel="jquery" href="#">jQuery</a></li> <li><a rel="css" href="#">CSS</a></li> <li><a rel="psd" href="#">PSD</a></li> </ul> <ul class="item"> <li rel="jquery"><img rel="lightbox" src="img/button.jpg" alt=""></li> <li rel="jquery"><img rel="lightbox" src="img/codesnippet.jpg" alt=""></li> <li rel="css"><img rel="lightbox" src="img/css.jpg" alt=""></li> <li rel="css"><img rel="lightbox" src="img/css2.jpg" alt=""></li> <li rel="psd"><img rel="lightbox" src="img/psd.jpg" alt=""></li> <li rel="jquery"><img rel="lightbox" src="img/groovershark.png" alt=""></li> <li rel="css"><img rel="lightbox" src="img/stylize.jpg" alt=""></li> <li rel="psd"><img rel="lightbox" src="img/psd2.jpg" alt=""></li> </ul> |
Ü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ı
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | /* menu adlı classa sahip ul etiketinin sol ve alt boşluğu ayarlanıyor */ ul.menu { margin-left: .5em; margin-bottom: 1em; } /*menu altındaki li etiketlerinin iç boşluğu, görüntülenme şekli, font işlemleri gibi ayarlar yapılıyor*/ ul.menu li { list-style-type: none; display: inline-block; font-weight: bold; text-shadow: 1px 1px 0px #f3f5da; padding: 2px 15px; } /*menu li etiketleri altındaki linklerin altındaki çizgi kaldırılıyor*/ ul.menu li a { text-decoration: none; } /*seçili olan menü elemanının arkaplan rengi ve ovalliği ayarlanıyor*/ .selected { -webkit-border-radius: 15px; -moz-border-radius: 5px; border-radius: 5px; background: #acac75; -webkit-box-shadow: 1px 1px 0px #8c8c5d; } /*seçili olan menu linkleri ile ilgili font düzenlemeleri yapılıyor*/ .selected a, .selected a:visited { text-shadow: 1px 1px 0px #8c8c60; color: #fff; } /*resim listesinin görüntülenme şekli ayarlanıyor*/ ul.item li { list-style-type: none; display: block; float: left; margin: .5em; } /*resim listesi içerisinde img etiketlerinin görünüşü ayarlanıyor*/ ul.item li img { border: 5px solid #fff; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0px 0px 5px #ac987e; -moz-box-shadow: 0px 0px 5px #ac987e; box-shadow: 0px 0px 5px #ac987e; } |
Üstteki css kodlarımız ile menü ve resim listesi ile ilgili görsel düzenlemeler yapıldı.
Jquery Kodu
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | $(function(){ $('.menu li a').click(function() { $('.menu li').removeClass('selected'); $(this).parent('li').addClass('selected'); debugger; var thisItem = $(this).attr('rel'); if(thisItem != "all") { $('.item li[rel='+thisItem+']').stop() .animate({'width' : '110px', 'opacity' : 1, 'marginRight' : '.5em', 'marginLeft' : '.5em' }); $('.item li[rel!='+thisItem+']').stop().animate({'width' : 0, 'opacity' : 0, 'marginRight' : 0, 'marginLeft' : 0 }); } else { $('.item li').stop().animate({'opacity' : 1, 'width' : '110px', 'marginRight' : '.5em', 'marginLeft' : '.5em' }); } }) }); |
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.
