Customizable, modular, responsive, light-box gallery plugin for jQuery.
Today I am going to share simple jQuery Plugin – lightGallery which help you to add a customizable, modular, responsive, light-box gallery plugin on your web based project.
Features
- Fully responsive.
- Modular architecture with built in plugins.
- Touch and support for mobile devices.
- Mouse drag supports for desktops.
- Double-click/Double-tap to see actual size of the image.
- Animated thumbnails.
- Social sharing.
- Youtube Vimeo Dailymotion VK and html5 videos Support.
- 20+ Hardware-Accelerated CSS3 transitions.
- Dynamic mode.
- Full screen support.
- Supports zoom.
- Browser history API.
- Responsive images.
- HTML iframe support.
- Multiple instances on one page.
- Easily customizable via CSS (SCSS) and Settings.
- Smart image preloading and code optimization.
- Keyboard Navigation for desktop.
- Font icon support.
- And many more.
First of all add lightgallery.css in the
<head> <link type="text/css" rel="stylesheet" href="css/lightGallery.css" /> </head> |
Then include jQuery and lightgallery.min.js into your document. If you want to include any lightgallery plugin you can include it after lightgallery.min.js. lightGallery and it’s plugins are available in lightgallery-all.js
<body> .... <!-- jQuery version must be >= 1.8.0; --> <script src="jquery.min.js"></script> <!-- A jQuery plugin that adds cross-browser mouse wheel support. (Optional) --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script> <script src="js/lightgallery.min.js"></script> <!-- lightgallery plugins --> <script src="js/lg-thumbnail.min.js"></script> <script src="js/lg-fullscreen.min.js"></script> </body> |
lightGallery also supports AMD, CommonJS and ES6 modules.
When you use AMD make sure that lightgallery.js is loaded before lightgallery modules.
require(['./lightgallery.js'], function() { require(["./lg-zoom.js", "./lg-thumbnail.js"], function(){ $("#lightgallery").lightGallery(); }); }); |
lightgallery does not force you to use any kind of markup. you can use whatever markup you want. But I suggest you to use the following markup. Here you can find the detailed examples of different kind of markups.
<div id="lightgallery"> <a href="img/img1.jpg"> <img src="img/thumb1.jpg" /> </a> <a href="img/img2.jpg"> <img src="img/thumb2.jpg" /> </a> ... </div> |
Finally you need to initiate the gallery by adding the following code.
<script type="text/javascript"> $(document).ready(function() { $("#lightgallery").lightGallery(); }); </script> |
See live demo and download source code.
DEMO | DOWNLOAD
This awesome plugin is developed by sachinchoolur. Visit their official github repository for more information and follow for future updates.