Nasıl Yapılır ?

11-11-2013, 18:22:46

Kimlik doğrulama veya yönetimden onay bekliyor.

SİTEYE GİT
yukarıdaki linke gittiğinzde anasayfada bi slider var acaba nasıl yapılıyor bu slider ? İlk sayfada ki sliderdan bahsediyorum acaba eklentisi var mıdır ? Ya da jquery ile yapımı zor mudur ?

12-11-2013, 00:17:49

#2

EmreCagiran

PrestijTR adlı üyeden alıntı: mesajı görüntüle

SİTEYE GİT
yukarıdaki linke gittiğinzde anasayfada bi slider var acaba nasıl yapılıyor bu slider ? İlk sayfada ki sliderdan bahsediyorum acaba eklentisi var mıdır ? Ya da jquery ile yapımı zor mudur ?

Gayet klasik bir slider çok büyütülcek bir tarafı yok. Sadece yazı kısmının vs inip çıkması için Jquery'den destek alınacak o kadar. Gerisi klasik slider?

12-11-2013, 11:14:10

#3

PrestijTR

EmreCagiran adlı üyeden alıntı: mesajı görüntüle

Gayet klasik bir slider çok büyütülcek bir tarafı yok. Sadece yazı kısmının vs inip çıkması için Jquery'den destek alınacak o kadar. Gerisi klasik slider?

jQuery bilgim temel seviyede tam nasıl yapılır bilmiyorum daha önce hiç slider yapmadım.

--R10.NET; Flood Engellendi -->-> Yeni yazılan mesaj 11:14:10 -->-> Daha önceki mesaj 10:13:31 --

Not: slideri yaptım ama otomatik oynamasını nasıl sağlarım ? kodlarım;

$(function(){
	/*	SLİDER BAŞLANGIÇ	*/
	$(".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");
	});
	/*	SLİDER BİTİŞ	*/
});

12-11-2013, 21:04:14

#4

~~KorkakHerif~~

Üyeliği durduruldu

Sermiyan;
Anahtar kelime "settimeout"
http://www.jquery4u.com/jquery-funct...meout-example/

12-11-2013, 22:00:49

#5

PrestijTR

yine olmadı yapamadım tam olarak settimeout fonksiyonu ile ne yapacağımı bulamadım,yardım.

12-11-2013, 23:11:15

#6

acayip

Kimlik doğrulama veya yönetimden onay bekliyor.

Arkadaşım jquery cyle plugin ile yapılmış. http://jquery.malsup.com/cycle/ adresinden detaylı açıklamayı görüp, plugini indirebilirsin. Birçok işimde kullanıyorum. Gayet kullanışlı bir plugin.

13-11-2013, 09:51:29

#7

PrestijTR

acayip adlı üyeden alıntı: mesajı görüntüle

Arkadaşım jquery cyle plugin ile yapılmış. http://jquery.malsup.com/cycle/ adresinden detaylı açıklamayı görüp, plugini indirebilirsin. Birçok işimde kullanıyorum. Gayet kullanışlı bir plugin.

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;
	});

13-11-2013, 18:22:24

#8

acayip

PrestijTR adlı üyeden alıntı: mesajı görüntüle

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>

13-11-2013, 19:15:41

#9

PrestijTR

acayip adlı üyeden alıntı: mesajı görüntüle

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>

Hocam yanlış anladınız resim slayt olayını yaptım ama başka bi sorun çıktı bu kez ben bu thumbnaillere tıkladığımda slayttaki resim değişmiyor sorun bu