jQuery image gallery plugin with zoom, download, fullscreen and slideshow feature

In this post I am going to share awesome jQuery Image gallery plugin with zoom, download, fullscreen and slideshow feature. This plugin is fully loaded with all the required features like social media share, zoomin zoomout, image download etc.

jQuery image gallery plugin
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: Twitter, Pinterest, Google Plus.
  • Supports image zooming and panning.
  • Provides a download button to save the image to the local.



Integrate jQuery Image Gallery Plugin

Libraries

Include all the required libraries along with jQuery library.

<link href="css/lightgallery.css" rel="stylesheet">
<script src="js/jquery.js"></script>
<script src="js/lightgallery-all.min.js"></script>

HTML

Create a list of thumbnails (small version of images) on the webpage and specify the destination of large version of your images in the using data-src attribute. You need to provide several additional source images in the data-responsive attribute to load appropriate images based on the screen size. you can also use data-sub-html attribute to define your own HTML caption for each image.

        <div class="demo-gallery">
            <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>
        </div>



JS

Finally call the plugin and see the action.

 <script type="text/javascript">
        $(document).ready(function(){
            $('#lightgallery').lightGallery();
        });
        </script>

Use following options to customize image gallery.

$('#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
});

See live demo and download source code.

DEMO | DOWNLOAD

Visit official github repository for more information and follow for future updates. Don’t forget to read license for using this plugin in your projects.


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.