jQuery Double Scroller Slideshow
15 Dec 2010 Leave a Comment
in JavaScript, jQuery
The following jquery slideshow is created using two scrollers, one for the main scroller, and one for the navigation scroller.
Code for main scroller:
var main_api = $(“div.main_scrollable”).scrollable({
mousewheel: false,
api: true,
speed: 400,
prev: “.main_prev”,
next: “.main_next”,
clickable: “true”
});
Code for navigation scroller:
var thumbs_api = $(“div.nav_scrollable”).scrollable({
mousewheel: false,
api: true,
speed: 400,
prev: “.thumb_prev”,
next: “.thumb_next”,
items: “img.thumb”
})
Code to help restict number of thumbnails appearing:
.onSeek(function(){
//this help to keep the number of thumbnails restricted
var size = 5;
if (this.getIndex() >= this.getSize() – size) {
this.seekTo(this.getSize() – size);
}
});
Code to set fading on all thumbs except the one at index:
thumbs_api.setFade = function(index) {
thumbs_api.getItems().fadeTo(“fast”,0.4);
thumbs_api.getItems().eq(index).stop().fadeTo(“fast”,1);
};
the rest of the code with comments:
// the initial state
thumbs_api.setFade(0);
thumbs_api.vps = 4; // viewport size for thumbs
// – scroll the main scrollable according to the clicks on the thumbs
// – set the fading to thumbs accordingly
// Rem.
// – clickable has been removed from the scrollable API:
// -> we use ‘each’ from JQuery to associate the callback to each thumb, including
// a counter at each call
// – We can use seekTo to scroll the main scrollable as it presents only
// a single image in its viewport
$(“img.thumb”).each(function(count) {
$(this).click(function () {
thumbs_api.clicked = true;
thumbs_api.setFade(count);
main_api.seekTo(count);
index = thumbs_api.getIndex(); // first visible thumb
size = thumbs_api.getSize(); // number of thumbs
if (index == count) {
thumbs_api.move(-2);
}
else if (index == count – 1) {
thumbs_api.prev();
}
else if (index <= count – thumbs_api.vps + 1) {
if (size – index – thumbs_api.vps >= 2) {
thumbs_api.move(2);
}
else if (size – index – thumbs_api.vps >= 1) {
thumbs_api.next();
}
}
else if (index <= count – thumbs_api.vps + 2) {
if (size – index – thumbs_api.vps >= 1) {
thumbs_api.next();
}
}
});
});
// – scroll the thumb scrollable according to the scroll of the main
// scrollable when it is scroll directly (click on the image, use of
// the mousewheel or the main control buttons)
// Rem.
// – onBeforeSeek callback is called at each time the main scrollable
// is scrolled, even when it is due to a thumb click. We use a state
// variable to avoid double effects
// – requires scrollable 1.1.1 (bugfix on callback for onSeek and
// onBeforeSeek)
main_api.onBeforeSeek(function (jq_event, index){
if (! thumbs_api.clicked) {
thumbs_api.setFade(index);
thumbs_api.seekTo(index);
}
});
// reset the state variable after each main scroll
main_api.onSeek(function (jq_event, index){
thumbs_api.clicked = false;
});
Showcase of the completed double scroller slideshow:
http://www.edselweb.com/fun-stuff/jquery/doubleScrollerSlideShow/doubleScrollerSlideShow.htm
