Bu yazımızda, jQuery pozisyon ve ölçüm fonksiyonlarından yararlanarak, yatay scroll (Sayfa Kaydırma) uygulaması yapacağız, ölçü ve pozisyon fonksiyonlarını incelemek için önceki derslerimize göz atabilirsiniz.
Amacımız, sağ ve sol oklarla hareket eden "Resim Kaydırıcı (Image Slider)" yapmak, resimlerin üzerine gelindiğinde de efekt uygulanacak, resim boyutu değiştirilecek ve resim bilgisi gösterilecek.
Uygulama:
Resimlerin üzerine geldiğinizde, resmin boyutu animasyonla değiştirilmekte ve stil uygulanmakta, info alanına resim bilgisi getirilmekte, ileri geri tuşlarıyla da resimler kaydırılmakta (Yatay Scroll).
CSS yapısı:
#area_product{
position:relative;
border:1px dashed #ff0000;
width:600px;
height:130px;
padding:5px;
clear:both;
}
#overflow_img{
position:relative;
width:233px;
height:80px;
float:left;
clear:both;
overflow:hidden;
}
#slider_dir{
float:left;
width:60px;
margin:0;
padding:0;
margin-left:0px;
margin-top:8px;
}
#slider_dir li{
display:inline;
list-style:none;
cursor:pointer;
}
#img_info{
float:left;
width:500px;
}
.img_list{
width:1600px;
height:84px;
padding:0;
margin:0;
float:left;
position:absolute;
left:0;
}
.img_list li{
float:left;
display:inline;
list-style:none;
padding:5px;
}
.img_list li img{
border:1px solid #ccc;
oveflow:hidden;
}
.shadow_box{
transition: width 0.5s, height 0.5s, transform 0.5s;
-moz-transition: width 0.5s, height 0.5s, -moz-transform 0.5s;
-webkit-transition: width 0.5s, height 0.5s, -webkit-transform 0.5s;
-o-transition: width 0.5s, height 0.5s,-o-transform 0.5s;
-moz-box-shadow: 0px 0px 3px 1px #ccc;
-webkit-box-shadow: 0px 0px 3px 1px #ccc;
box-shadow: 0px 0px 3px 1px #ccc;
border:1px solid #6cdde4 !important;
}
HTML yapısı:
<div id="area_product">
<div id="overflow_img">
<ul class="img_list">
<li><a href="#"><img src="gitar.png" width="64" height="64" alt="" title="" data-info="Gitar çalan twitter..."/></a></li>
<li><a href="#"><img src="surf.png" width="64" height="64" alt="" title="" data-info="Surf yapan twitter..."/></a></li>
<li><a href="#"><img src="twitman.png" width="64" height="64" alt="" title="" data-info="Süper Kahraman twitter..."/></a></li>
<li><a href="#"><img src="ucak.png" width="64" height="64" alt="" title="" data-info="Pilot twitter..."/></a></li>
<li><a href="#"><img src="gitar.png" width="64" height="64" alt="" title="" data-info="Gitar çalan twitter..."/></a></li>
<li><a href="#"><img src="surf.png" width="64" height="64" alt="" title="" data-info="Gitar çalan twitter..."/></a></li>
</ul>
</div>
<ul id="slider_dir">
<li id="prev_but"><img src="left_passive.png" width="16" height="16" alt="" title=""/></li>
<li id="next_but"><img src="right_active.png" width="16" height="16" alt="" title=""/></li>
</ul><br/>
<div id="img_info"><strong>Bilgi:</strong> <span></span></div>
</div>
JQuery yapısı:
<script type="text/javascript">
$(document).ready(function(){
//Bilgi kısmına ilk değerimizi gönderiyoruz
$("#img_info span").html("Buraya img bilgisi gelecek...");
//Listemizin genişlik değerini buluyoruz
//(64px icon width+10px padding değeri=74px*6 (6 adet li etiketi var))
var width=($(".img_list li").length)*74;
//3 adet icon kalınca duracağımız göre
//son 3 icon soldan uzaklık değeri (left)
var last_trio=222-width;
//li etketi içindeki a link üzerine olay tetikleyicimiz
$(".img_list li a").on({
mouseenter:function(){ //Alana girince
//Gölge sınıfımız ekleniyor(CSS3 özellik içerir: IE9 öncesi gölge eklenmez)
$(this).find("img").addClass("shadow_box");
//Resimlerin üzerine gelince 1.1 katı büyütüyoruz
var img_width=parseInt(($(this).find("img").attr("width"))*1.1);
var img_height=parseInt(($(this).find("img").attr("height"))*1.1);
//Resimlerin büyütülmüş boyutlarını giriyoruz
$(this).find("img").attr({
'width':img_width,
'height':img_height
});
//Bilgi alanına, resimlerin içindeki
//data-info etiketindeki bilgiyi gönderiyoruz
$("#img_info span").html($(this).find("img").data("info"));
},
mouseleave:function(){ //Alandan çıkınca
//Gölge sınıfını (CSS3 özellik içerir) kaldırıyoruz
$(this).find("img").removeClass("shadow_box");
//Resimleri orjinal boyutlarına getiriyoruz
$(this).find("img").attr({
'width':64,
'height':64
});
//Bilgi kısmına ilk değerimizi gönderiyoruz
$("#img_info span").html("Buraya img bilgisi gelecek...");
}
});
//Sonraki butonuna tıklanınca
$("#next_but").click(function(){
//Önceki butonunun resmini aktif resim ile değiştiriyoruz
$("#prev_but").children("img").attr('src','left_active.png');
//Listenin soldan uzaklığını belirliyoruz
var list_pos=($(".img_list")).position();
var list_left=list_pos.left;
//Eğer liste son 3 resme gelmediyse sola doğru kaydırıyoruz
if(list_left>last_trio){
$(".img_list").animate({
left:"-=75"
});
}else{
//Son 3 resim görüntüleniyorsa, yani sona gelindiyse
//Pasif buton resmiyle değiştiriyoruz
$(this).children("img").attr("src","right_passive.png");
}
});
//Önceki butonuna tıklanınca
$("#prev_but").click(function(){
//Sonraki butonunun resmini aktif resim ile değiştiriyoruz
$("#next_but").children("img").attr("src","right_active.png");
//Listenin soldan uzaklığını belirliyoruz
var list_pos=($(".img_list")).position();
var list_left=list_pos.left;
//Eğer liste ilk 3 resme gelmediyse sağa doğru kaydırıyoruz
if(list_left<0){
$(".img_list").animate({
left:"+=75"
});
}else{
//Son 3 resim görüntüleniyorsa, yani başa gelindiyse
//Pasif buton resmiyle değiştiriyoruz
$(this).children("img").attr("src","left_passive.png");
}
});
});
</script>
Açıklamalar:
Gerekli açıklamaları kodların üzerinde belirtmeye çalıştım, çok ekstra bir durum da olmadığı için ayrıntılı bir açıklama yapmadım, dikkat etmenizi istediğim birkaç noktayı da aşağıda belirttim.
- "#overflow_img" id'li katman, resimleri sunduğumuz listeyi saran dış katmandır, bunun genişlik değeri ile göstereceğimiz resim sayısını sınırladık, ayrıca "position" değeri olarak "relative"verdik, listemizin bulunduğu katmana da "absolute" değerini verdik ki, alanımız "#overflow_img" katmanı ile sınırlansın, ayrıca "#overflow_img" katmanının "overflow" değerini de "hidden" yaptık, bu sayede listemizin dışarda kalan kısmını göstermemiş olduk, dikkat ederseniz liste alanımızın genişlik değeri "1600px" eğer "hidden" yapmasaydık tüm resimler görüntülenecekti
Kolay gelsin, görüşmek üzere...
