scrollable adalah sebuah efek yang ketika klik objek secara otomatis objek tersebut bergeser ke vertical maupun horisontal. untuk membuatnya cukup mudah denganmenggunakan bantuan plug in jQuerytools. yang bisa didownload disitus resminya jquerytools. jQuery Tools adalah kumpulan dari komponen library jQuery yang telah di packing dalam bentuk user-interface.
HTML coding
Setelah itu kita menyisipkan script dibawah ini untuk menghubungkan file library JQuery dengan file html. Hal ini agar kita dapat menggunakan fungsi Jquery tersebut.
<head>
<link rel="stylesheet" type="text/css" href="css/scrollable-horizontal.css">
<link rel="stylesheet" type="text/css" href="css/scrollable-buttons.css">
<script src="jquery.tools.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#gulung").scrollable({
circular: true
});
});
</script>
</head>
Scrollable identik dengan pengaturan minimal. Tidak ada yang perlu dimodifikasi dan dirubah. Di sini kita hanya fokus pada elemen yang diperlukan untuk menghasilkan efek menggeser gambar. untuk membuatnya kita hanya perlu memanggil classnya class="scrollable" id="gulung". Berikut adalah HTML:
<body>
<div style="margin:0 auto; width: 634px; height:120px;">
<!-- aksi untuk halaman sebelumnya -->
<a class="prev browse left"></a>
<!-- elemen untuk efek scrollable -->
<div class="scrollable" id="gulung">
<!-- elemen untuk items (gambar) -->
<div class="items">
<!-- foto ke 1 s.d 4 -->
<div>
<img src="images/skyfall_t.jpg">
<img src="images/stolen_t.jpg">
<img src="images/lorax_t.jpg">
<img src="images/spiderman_t.jpg">
</div>
<!-- foto ke 5 s.d 8 -->
<div>
<img src="images/ichi_t.jpg">
<img src="images/les_t.jpg">
<img src="images/jack_t.jpg">
<img src="images/robinhood_t.jpg">
</div>
<!-- foto ke 9 s.d 12 -->
<div>
<img src="images/khan_t.jpg">
<img src="images/kcb_t.jpg">
<img src="images/pemimpi_t.jpg">
<img src="images/confucius_t.jpg">
</div>
</div>
</div>
<!-- aksi untuk halaman berikutnya -->
<a class="next browse right"></a>
</div>
</body>
</html>
Ada baiknya untuk memberikan dimensi-dimensi awal pada gambar sehingga tidak "melompat" dan tetap stabil.
CSS coding
.scrollable {
/* required settings */
position:relative;
overflow:hidden;
width: 550px;
height:165px;
/* custom decorations */
border:1px solid #ccc;
background:url(img/h300.png) repeat-x;
}
.scrollable .items {
/* this cannot be too large */
width:20000em;
position:absolute;
clear:both;
}
.items div {
float:left;
width:680px;
}
/* single scrollable item */
.scrollable img {
float:left;
margin:20px 5px 20px 21px;
background-color:#fff;
padding:2px;
border:1px solid #ccc;
width:100px;
height:119px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
}
/* active item */
.scrollable .active {
border:2px solid #000;
position:relative;
cursor:default;
}
JavaScript setup
kita menambahkan handler klik untuk item digulir sehingga pengguna mengerti bahwa ada sesuatu yang terjadi.
$(".scrollable").scrollable();
$(".items img").click(function() {
// see if same thumb is being clicked
if ($(this).hasClass("active")) { return; }
// calclulate large image's URL based on the thumbnail URL (flickr specific)
var url = $(this).attr("src").replace("_t", "");
// get handle to element that wraps the image and make it semi-transparent
var wrap = $("#image_wrap").fadeTo("medium", 0.5);
// the large image from www.flickr.com
var img = new Image();
// call this function after it's loaded
img.onload = function() {
// make wrapper fully visible
wrap.fadeTo("fast", 1);
// change the image
wrap.find("img").attr("src", url);
};
// begin loading the image from www.flickr.com
img.src = url;
// activate item
$(".items img").removeClass("active");
$(this).addClass("active");
// when page loads simulate a "click" on the first image
}).filter(":first").click();
Berikut kami share link download Source codenya :
DOWNLOAD
