Full-featured Image Viewer/Gallery Plugin With jQuery

A powerful, flexible, feature-rich, fully responsive, user-friendly, and mobile-compatible jQuery plugin for presenting your images in a fullscreen image viewer/gallery. Licensed under the GPLv3.

Main features:

• Modal-style fullscreen image viewer/gallery with image captions and counter.
• Image loading spinner.
• Progressive image lazy loading.
• Auto switches between images with a progress bar.
• Also allows you to switches between images with mouse wheel, mouse drag and touch events.
• Bottom thumbnail navigation.
• Share images on social networks: Facebook, Twitter, Pinterest, Google Plus.
• Supports image zooming and panning.
• Provides a download button to save the image to the local.

How to use it:

1. To get started, include the latest jQuery library and the jQuery image-gallery plugin's JavaScript & CSS files on the page.

<link href="css/lightgallery.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>
<script src="js/lightgallery-all.min.js"></script>

2. Create a list of thumbnails (small version of images) on the webpage and specify the large version of your images in the data-src attribute. You need to provide several additional source images in the data-responsive attribute to load ppropriate images based on the screen size. The data-sub-html attribute is used to define your own HTML caption for each image.

<ul id="lightgallery" class="list-unstyled row">
  <li class="col-xs-6 col-sm-4 col-md-3" data-responsive="img/1-375.jpg 375, img/1-480.jpg 480, img/1.jpg 800" data-src="img/1-1600.jpg" data-sub-html="<h4>Fading Light</h4><p>Classic view from Rigwood Jetty on Coniston Water an old archive shot similar to an old post but a little later on.</p>">
    <a href="">
      <img class="img-responsive" src="img/thumb-1.jpg">
    </a>
  </li>
  <li class="col-xs-6 col-sm-4 col-md-3" data-responsive="img/2-375.jpg 375, img/2-480.jpg 480, img/2.jpg 800" data-src="img/2-1600.jpg" data-sub-html="<h4>Bowness Bay</h4><p>A beautiful Sunrise this morning taken En-route to Keswick not one as planned but I'm extremely happy I was passing the right place at the right time....</p>">
    <a href="">
      <img class="img-responsive" src="img/thumb-2.jpg">
    </a>
  </li>
  <li class="col-xs-6 col-sm-4 col-md-3" data-responsive="img/13-375.jpg 375, img/13-480.jpg 480, img/13.jpg 800" data-src="img/13-1600.jpg" data-sub-html="<h4>Bowness Bay</h4><p>A beautiful Sunrise this morning taken En-route to Keswick not one as planned but I'm extremely happy I was passing the right place at the right time....</p>">
    <a href="">
      <img class="img-responsive" src="img/thumb-13.jpg">
    </a>
  </li>
  <li class="col-xs-6 col-sm-4 col-md-3" data-responsive="img/4-375.jpg 375, img/4-480.jpg 480, img/4.jpg 800" data-src="img/4-1600.jpg" data-sub-html="<h4>Bowness Bay</h4><p>A beautiful Sunrise this morning taken En-route to Keswick not one as planned but I'm extremely happy I was passing the right place at the right time....</p>">
    <a href="">
      <img class="img-responsive" src="img/thumb-4.jpg">
    </a>
  </li>
</ul>

3. Call the function lightGallery on the thumbnail list and done.

$(document).ready(function(){
  $('#lightgallery').lightGallery();
});

4. The plugin also provides seveal useful options to customize the gallery as per your needs.

$('#lightgallery').lightGallery({
  mode: "lg-slide",
  cssEasing: "ease",
  easing: "linear",
  speed: 600,
  height: "100%",
  width: "100%",
  addClass: "",
  startClass: "lg-start-zoom",
  backdropDuration: 150,
  hideBarsDelay: 6000,
  useLeft: false,
  closable: true,
  loop: true,
  escKey: true,
  keyPress: true,
  controls: true,
  slideEndAnimatoin: true,
  hideControlOnEnd: false,
  mousewheel: true,
  getCaptionFromTitleOrAlt: true,
  appendSubHtmlTo: ".lg-sub-html",
  subHtmlSelectorRelative: false,
  preload: 1,
  showAfterLoad: true,
  selector: "",
  selectWithin: "",
  nextHtml: "",
  prevHtml: "",
  index: false,
  iframeMaxWidth: "100%",
  download: true,
  counter: true,
  appendCounterTo: ".lg-toolbar",
  swipeThreshold: 50,
  enableSwipe: true,
  enableDrag: true,
  dynamic: false,
  dynamicEl: [],
  galleryId: 1
});

---

This awesome jQuery plugin is developed by pankajkumar-official. For more Advanced Usages, please check the demo page or visit the official website.