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.

Markup

<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

• We've modified the thumbnail-slider.js to create two instances of the ThumbnailSlider class with different options: var thumbnailSliderOptions = { sliderId: "thumbnail-slider", orientation: "horizontal", thumbWidth: "300px", thumbHeight: "150px", showMode: 3, autoAdvance: false, initSliderByCallingInitFunc: false, mousewheelNav: true, ...... }; var thumbs2Op = { sliderId: "thumbs2", orientation: "vertical", thumbWidth: "50%", //50% of the div#thumbs2 width thumbHeight: "auto", showMode: 3, autoAdvance: false, initSliderByCallingInitFunc: true, //It does not need to be instantiated on page load mousewheelNav: true, ...... }; var mcThumbnailSlider = new ThumbnailSlider(thumbnailSliderOptions); var mcThumbs2 = new ThumbnailSlider(thumbs2Op); /* ThumbnailSlider Slider v2015....(The following code should remain to be single copy and untouched) */
• At the bottom of the page, or after the markup of the jQuery slideshows, add the following script: <script> var thumbs1 = document.getElementById("thumbnail-slider"); var thumbs2 = document.getElementById("thumbs2"); var closeBtn = document.getElementById("closeBtn"); var slides = thumbs1.getElementsByTagName("li"); for (var i = 0; i < slides.length; i++) { slides[i].onclick = function (e) { slides[i].index = i; slides[i].onclick = function (e) { var li = this; var clickedEnlargeBtn = false; if (e.offsetX > 220 && e.offsetY < 25) clickedEnlargeBtn = true; if (li.className.indexOf("active") != -1 || clickedEnlargeBtn) { thumbs2.style.display = "block"; mcThumbs2.init(li.index); } }; }; } thumbs2.onclick = closeBtn.onclick = function (e) { //This event will be triggered only when clicking the area outside //the thumbs or clicking the CLOSE button thumbs2.style.display = "none"; }; </script>

Config Styles

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

More Info

• Full documentation: jQuery Slider
• Questions & Answers: Posts in the forum