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.


<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

Config Styles

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

More Info