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, ninjaSldr) {
//Note: fsIconClick is the default event handler of the fullscreen button
if (isFullscreen) {
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.-
Show the caption below the slider:
#ninja-slider .caption { position:absolute; top:100%; } -
Reserves a 100px space under the slider:
#ninja-slider .slider-inner {padding-bottom: 100px!important;} #ninja-slider li {margin-bottom: 100px!important;} -
And remove the overflow:hidden; settings:
#ninja-slider ul {overflow:visible!important;} #ninja-slider li {/*overflow:hidden;*/}