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