Demo 4: Integrating Thumbnail Slider as a Lightbox

In this demo, clicking a gallery image launches the thumbnail slider in lightbox mode, allowing users to browse larger versions of the images seamlessly.

HTML

<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 Thumbnail Slider Lightbox and the image gallery can use different images, or as this demo did, use the same images.

JavaScript

• thumbnail-slider.js options:

  var thumbnailSliderOptions =
  {
      sliderId: "thumbnail-slider",
      orientation: "vertical",
      thumbWidth: "50%", //50% of the div#thumbnail-slider width
      thumbHeight: "auto",
      showMode: 3,
      autoAdvance: false,
      initSliderByCallingInitFunc: true, // the reason we need to set it true
      mousewheelNav: true,
      ......
  };

  Since the thumbnail slider is initially display:none, we need to set this option to true, so that the slider will not be initialized during page load.

  Instead, we will initialize the slider later when a gallery image is clicked.

• At the bottom of the page, or after the markup of the thumbnail slider and the image gallery, add the following script:

  <script>
      var thumbSldr = document.getElementById("thumbnail-slider");
      var closeBtn = document.getElementById("closeBtn");
      var galleryImgs = document.getElementById("myGallery").getElementsByTagName("li");
      for (var i = 0; i < galleryImgs.length; i++) {
          galleryImgs[i].index = i;
          galleryImgs[i].onclick = function (e) {
              var li = this;
              thumbSldr.style.display = "block";
              mcThumbnailSlider.init(li.index);
          };
      }
  
      // Close the lightbox when clicking outside the thumbnail slider or on the CLOSE button
      thumbSldr.onclick = closeBtn.onclick = function (e) {
          thumbSldr.style.display = "none";
      };
  </script>

Styles

Please refer to the source code included in the download package.