Demo 6: Using jQuery Slider as a Lightbox

Menucool jQuery Slider can be used as a lightbox. Clicking gallery images will pop up the jQuery slider as a lightbox to show the image details.

We added a script into the page that will hide the jQuery Slider lightbox by default. It will display when the the gallery images are clicked.

Visit jQuery Slider to download this demo.

Markup

<div id="thumbnail-slider" style="display:none;">
    <div class="inner">
        (...ommitted for brevity)
    </div>
    <div id="closeBtn">CLOSE</div>
</div>
<ul id="myGallery">
    <li><img src="img/1.jpg" /></li>
    ......
    <li><img src="img/9.jpg" /></li>
</ul>

The jQuery slider lightbox and the image gallery can use different images, or as this demo did, use the same images.

Config JavaScript

thumbnail-slider.js options: var thumbnailSliderOptions = { sliderId: "thumbnail-slider", orientation: "vertical", thumbWidth: "50%", //50% of the div#thumbnail-slider width thumbHeight: "auto", showMode: 3, autoAdvance: false, initSliderByCallingInitFunc: true, //It does not need to be instantiated on page load mousewheelNav: true, ...... };
At the bottom of the page, or after the markup of the jQuery slider and the image gallery, add the following script: <script> var thumbSldr = document.getElementById("thumbnail-slider"); var closeBtn = document.getElementById("closeBtn"); var galleryImgs = document.getElementById("myGallery").getElementsByTagName("li"); for (var i = 0; i < galleryImgs.length; i++) { galleryImgs[i].index = i; galleryImgs[i].onclick = function (e) { var li = this; thumbSldr.style.display = "block"; mcThumbnailSlider.init(li.index); }; } thumbSldr.onclick = closeBtn.onclick = function (e) { //This event will be triggered only when clicking the area outside //the thumbs or clicking the CLOSE button thumbSldr.style.display = "none"; }; </script>

Config Styles

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

More Info

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