Ali @mintik
3 Şubat 2021 12:22

SimplyScroll.js

SimplyScroll

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

 

 

Bu Yazıyı Paylaş

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

ÜYE GİRİŞİ

Arkadaş ekleme, özel mesaj, kişisel yazı paylaşmak için siteye giriş yapın

Şifremi unuttum? Kayıt Ol!
  • Ali:

    Pardon Yuyyu olacaktı...

  • Ali:

    Tamam yuyu da olsun :)...

  • Arkadaşlık Uygulaması:

    Yuyyu Online Arkadaşlık Sitesi – Sohbet Et ve Yeni İnsanlarla Tanış Yuy...

  • Ali:

    Üşenmeden web arşivi linkini arayıp bulmuşsun teşekkürler :)...

  • ibrahim:

    türkiyeden de bırakan olmuş oyunu. dünya geneli de bırakan epey olmuş. wi...

  • Araç çubuğuna atla