Hocma bunu kullandım,şimdi küçük resime tıkladığımda büyük resime geçiş yapacak ama o zaman da geçmiyor,linkteki örneğe bakarsanız küçük thumbnail resimler var onlara tıklanıldığında büyüğünün açılması gerekiyor ben de ise tıkladığında açılmıyor bu sorunu nasıl aşabiliri m? jquery kodlarım aşağıdaki gibidir.
$(".slider_icerik").css("display","none");
$(".slider_icerik:first").show();
$(".slider_thumbnail a").click(function(){
var indis = $(this).index();
$(".slider_icerik").fadeIn().css("display","none");
$(".slider_icerik:eq("+indis+")").css("display","block");
return false;
});
Arkadaşım o şekilde kullanmayacaksın. Verdiğim sayfayı iyice inceleseydin keşke. Bak basitçe şu şekilde yapacaksın. Js dosyalarını ve resim adreslerini kendine göre değişmeyi unutma:
<html>
<head>
<script type="text/javascript" src="src/jquery.js"></script>
<script type="text/javascript" src="src/cycle.js"></script>
<script type="text/javascript">
$(function() {
$('#slider').cycle({
fx: 'fade',
pause:1,
timeout: 3000,
pager: '#slider_menu',
pagerAnchorBuilder: function(idx, slide) {
return '#slider_menu a:eq(' + (idx) + ')';
},
pagerEvent: 'click',
pauseOnPagerHover: true,
fastOnEvent: 1
});
});
</script>
<style type="text/css">
/*Kendi isteğine göre değiş ben basitçe yazıyorum*/
#slider, #slider div{width:600px;height:400px;overflow:hidden;}
#slider{border:1px solid #ccc;margin:10px auto;float:left;}
#slider div img{width:600px;height:400px;}
#slider_menu{width:600px;height:40px;overflow:hidden;float:left;clear:left;}
#slider_menu li{list-style:none; display:block;float:left;width:60px;height:40px;overflow:hidden;margin:0 5px;border:1px solid #ccc;}
#slider_menu img{width:60px; height:40px;}
</style>
<div id="slider">
<div>
<img src="resim1.jpg" alt="Resim 1" />
</div>
<div style="display:none;">
<img src="resim2.jpg" alt="Resim 2" />
</div>
<div style="display:none;">
<img src="resim3.jpg" alt="Resim 3" />
</div>
</div>
<ul id="slider_menu">
<li><a href="#" title="1. Resim"><img src="kucuk_resim1.jpg" /></a></li>
<li><a href="#" title="2. Resim"><img src="kucuk_resim2.jpg" /></a></li>
<li><a href="#" title="3. Resim"><img src="kucuk_resim3.jpg" /></a></li>
</ul>
</body>
</html>