• Dummy Caption 1

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus accumsan purus.

  • Dummy Caption 2

    Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet

  • Dummy Caption 3

    Duis fringilla arcu convallis urna commodo, et tempus velit posuere.

  • Dummy Caption 4

    Quisque semper dolor sed neque consequat scelerisque at sed ex. Nam gravida massa.

  • Dummy Caption 5

    Proin non dui at metus suscipit bibendum.

DEMO: Click Gallery Images to Popup Lightbox



Show Image Gallery on Modal Popup

Ninja Slider can be used as lightbox, the image slideshow in a modal popup window.

The lightbox will take advantage of all the Ninja Slider's rich features: responsive, touch device friendly, video support, etc.

Visit Ninja Slider to download this demo or purchase license.

Image Gallery Markup

<div class="gallery"> <img src="thumbnail_1.jpg" onclick="lightbox(0)" style="width:auto; height:140px;" /> <img src="thumbnail_2.jpg" onclick="lightbox(1)" style="width:auto; height:140px;" /><br /> <img src="thumbnail_3.jpg" onclick="lightbox(2)" /> <img src="thumbnail_4.jpg" onclick="lightbox(3)" /> <img src="thumbnail_5.jpg" onclick="lightbox(4)" /> </div>

Notice the code above has specified that clicking on each gallery image will trigger a lightbox(index) function.

Slideshow Markup

Place the Ninja Slider inside a "display:none" wrapper:

<div style="display:none;"> <div id="ninja-slider">...(omitted for brevity)...</div> </div>

Script to Popup the Lightbox

Add the following script into the page

<script> function lightbox(idx) { //Show the slider wrapper var ninjaSldr = document.getElementById("ninja-slider"); ninjaSldr.parentNode.style.display = "block"; //Then init the slider //Note: The { initSliderByCallingInitFunc: true } option in the // ninja-slider.js tells the page not to initiate the slider // unless the following init(idx) function is called. nslider.init(idx); //Then mimic clicking the fullscreen button to popup the modal var fsBtn = document.getElementById("fsBtn"); fsBtn.click(); } function fsIconClick(isFullscreen) { //Note: fsIconClick is the default event handler of the fullscreen button if (isFullscreen) { var ninjaSldr = document.getElementById("ninja-slider"); ninjaSldr.parentNode.style.display = "none"; } } </script>

Show each slide image caption outside the slider

We've updated the ninja-slider.css file so as to show each image caption outside the slider:

Note: If you don't need to show captions outside the slider, it is recommended to use the "standard" stylesheets of other demos.