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

Config Styles

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

More Info