Demo 4: jQuery Slideshow

We can add multiple jQuery slideshows into the same page. In this demo we've added two: one shows the thumbnails and the other shows their details.

We added a script into the page that will display the second slideshow when the ENLARGE button or when the active thumb in the first image slideshow is clicked.

Visit jQuery Slider to download this demo.


<div id="thumbnail-slider"> (...ommitted for brevity) </div> <div id="thumbs2" style="display:none;"> <div class="inner"> (...ommitted for brevity) </div> <div id="closeBtn">CLOSE</div> </div>

The two jQuery slideshows can use different thumbnails, or just as this demo did, use the same thumbnails. The thumbnails can be easily scaled to the desired size by the thumbWidth and thumbHeight option in the thumbnail-slider.js.

Config JavaScript

Config Styles

Please refer to the thumbnail-slider.css and thumbs2.css for details.

More Info