SimplyScroll.js

SimplyScroll.js

jQuery  için Will Kelly  tarafından geliştirilen  SimplyScroll  Eklentisi   ile    ileriye,  geriye, yukarıya, aşağıya  doğru, yatay  ve  dikey, otomatik veya manuel olarak  kayan  resim galerileri hazırlayabilirsiniz.  Ayrıca kaydırma yapıldığı  zaman sonsuz  olarakta  ayarlayabilrsiniz.  Örnekler  içerisinde  bana en hoş  görünen  bir kaç  tanesini buraya ekledim geri kalan demo örneklerini  download  linkinden temin edebilirsiniz.

Kullanım

  • Head  etiketleri arasına  eklemeniz gereken bölümler:
Js ve stil dosyaları : 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<!--<script type="text/javascript" src="/js/common.js"></script>-->
<script type="text/javascript" src="../jquery.simplyscroll.js"></script>
<link rel="stylesheet" href="../jquery.simplyscroll.css" media="all" type="text/css">

JavaScript : 

<script type="text/javascript">
(function($) {
	$(function() {
		$("#scroller").simplyScroll({
			auto: false,
			speed: 10
		});
	});
})(jQuery);
</script>
  • Body etiketleri arasına eklemeniz gereken bölüm.

Html : 

<ul id="scroller">

    <li><img src="http://logicbox.net/jquery/simplyscroll/assets/20080608_9N3H5GYL_tb.jpg" width="290" height="200" alt="Firehouse"></li>

    <li><img src="http://logicbox.net/jquery/simplyscroll/assets/20080513_4D3SD1BQ_tb.jpg" width="290" height="200" alt="Chloe nightclub"></li>

    <li><img src="http://logicbox.net/jquery/simplyscroll/assets/20080513_VPJWVQRW_tb.jpg" width="290" height="200" alt="Firehouse bar"></li>

    <li><img src="http://logicbox.net/jquery/simplyscroll/assets/20080514_B1YJ08B6_tb.jpg" width="290" height="200" alt="Firehouse chloe club fishtank"></li>

    <li><img src="http://logicbox.net/jquery/simplyscroll/assets/20080514_JYW68XPT_tb.jpg" width="290" height="200" alt="Firehouse restaurant"></li>

    <li><img src="http://logicbox.net/jquery/simplyscroll/assets/20080608_38CG51J2_tb.jpg" width="290" height="200" alt="Firehouse"></li>

</ul>

Demo 1 :  Manuel Kaydırma

Komut :

<script type="text/javascript">

(function($) {

	$(function() {

		$("#scroller").simplyScroll({

			auto: false,

			speed: 10

		});

	});

})(jQuery);

</script>

 

Demo 2 : Dikey Kaydırma

Komut :

<script type="text/javascript">

(function($) {

	$(function() {

		$("#scroller").simplyScroll({

			customClass:'vert',

			orientation:'vertical',

			auto: false,

			manualMode: 'loop',

			speed: 10			

		});

	});

})(jQuery);

</script>

 

Demo 3 :  Play Pause

Komut :

<script type="text/javascript">

(function($) {

	$(function() {

		$("#scroller").simplyScroll({pauseButton: true});

	});

})(jQuery);

</script>

Diğer demolar  ve anlatımlarına simplyscroll  adresinden ingilizce olarak ulaşabilirsiniz.

Download : jquery.simplyscroll.zip

 

 

Ali
Telif Hakkı Bildirimi:Bu sitedeki orijinal makaleyi Ali2021-02-03 tarihinde yayınlandı,Toplam 2446 karakterden oluşmaktadır.
Yeniden yazdırma ipuçları:Özel talimatlar dışında, bu sitedeki tüm makaleler CC-4.0 sözleşmesi kapsamında yayınlanmaktadır.Yeniden basılması için lütfen kaynak belirtiniz.
Yorum yap(Yorum yapılmamış)
Yükleniyor...