edselweb's fun stuff

jQuery Double Scroller Slideshow

15 Dec 2010 Leave a Comment

by edselweb 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