lightGallery: thumbnails

Lightgallery allows you to create animated thumbnails for your gallery with the help of thumbnail plugin. It supports touch swipe navigation on touchscreen devices as well as mouse drag for desktops. It also allows users to navigate between thumbnails via swipe of their fingers or mouse drag.

Plugin dependency

Lightgallery require the thumbnail plugin to be included in your document.

HTML structure

<div id="aniimated-thumbnials">
  <a href="img/img1.jpg">
    <img src="img/thumb1.jpg" />
  </a>
  <a href="img/img2.jpg">
    <img src="img/thumb2.jpg" />
  </a>
  ...
</div>

Javascript

lightGallery(document.getElementById('aniimated-thumbnials'), {
    thumbnail:true
});

Gallery without animated thumbnails

Plugin dependency

Lightgallery require the thumbnail plugin to be included in your document.

HTML structure

<div id="animated-thumbnials">
  <a href="img/img1.jpg">
    <img src="img/thumb1.jpg" />
  </a>
  <a href="img/img2.jpg">
    <img src="img/thumb2.jpg" />
  </a>
  ...
</div>

Javascript

lightGallery(document.getElementById('animated-thumbnials'), {
    thumbnail:true,
    animateThumb: false,
    showThumbByDefault: false
});

Gallery with animated thumbnails

Plugin dependency

HTML structure

Javascript

Gallery without animated thumbnails

Plugin dependency

HTML structure

Javascript

More demos