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
