Demo 8: Show Image Gallery on Modal Popup

HTML

<div style="display:none;">
    <div id="ninja-slider">...(omitted for brevity)...</div>
</div>
<div class="gallery">
    <img src="thumbnail_1.jpg" onclick="lightbox(0)" />
    <img src="thumbnail_2.jpg" onclick="lightbox(1)" />
    ......
</div>

JavaScript

Set the option initSliderByCallingInitFunc: true in ninja-slider.js

var nsOptions = {
    ......,
    initSliderByCallingInitFunc: true,
    ......
};

By enabling this option, the slider will not initialize automatically.

This is necessary because the slider is initially hidden (its container is display:none), and it must be visible when initialized.

You will need to explicitly call the init() function when you are ready:

<script>
    function lightbox(idx) {
        //1. Make slider wrapper visible
        var ninjaSldr = document.getElementById("ninja-slider");
        ninjaSldr.parentNode.style.display = "block";

        //2. init the slider
        nslider.init(idx);

        //3. 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>

Display each slide image caption outside the slider

We have updated the ninja-slider.css file to display each image caption outside the slider when shown in the lightbox:

• Display the caption below the slider:

  #ninja-slider .caption {
      position: absolute;
      top: 100%;
  }

• Reserve a 100px space below the slider:

  #ninja-slider .slider-inner { padding-bottom: 100px !important; }
  #ninja-slider li { margin-bottom: 100px !important; }

• Remove the overflow:hidden; property:

  #ninja-slider ul { overflow: visible !important; }
  #ninja-slider li { /*overflow:hidden;*/ }