Customizable, modular, responsive, light-box gallery plugin for jQuery.

by Posted on

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.
lightgallery
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 of the document.

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


Published by admin