Responsive & Touch-Friendly jQuery Gallery Lightbox Plugin – lightGallery

A Free jQuery lightbox Plugin with lightGallery.js allows you to create animated thumbnails for your gallery with displaying an image/video gallery in a fullscreen lightbox with CSS3 transition effects. It supports with touch and swipe navigation on touchscreen devices and as well with mouse drag and drop for desktop system. It navigate between thumbnails element via swipe of their fingers or mouse drag.

There Are Many More Features:

It has with include with 30+ transition animations. this is support with Auto play when images loaded with Infinite looping. it is Supports youtube & vimeo videos, not just images.

• Image captions & descriptions support.
• Arrows, thumbnails and keyboard navigation.
• Cross browser. Supports all major browsers.
• Easing options support.
• Multiple instances on one page.

How to used :

Add with jQuery library and jQuery lightGallery plugin’s CSS and javascript in the document.

Here, We’re adding jQuery Library files Of Javascript and CSS files into the existing code.

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

load with core JavaScript and optional extensions on your choice.

scr: The large version of your image/video. Then include jQuery and lightgallery.min.js into your document. If you want to have any lightgallery plugin, you can have it after lightgallery.min.js. lightGallery and it’s plugins are available in lightgallery-all.js

<!-- Core -->
<script src="/path/to/dist/js/lightgallery.min.js"></script>
<!-- Autoplay -->
<script src="/path/to/modules/lg-autoplay.js"></script>
<!-- Fullscreen -->
<script src="/path/to/modules/lg-fullscreen.js"></script>
<!-- Hashtag -->
<script src="/path/to/modules/lg-hash.js"></script>
<!-- Pager -->
<script src="/path/to/modules/lg-pager.js"></script>
<!-- Rotate -->
<script src="/path/to/modules/lg-rotate.js"></script>
<!-- Social share -->
<script src="/path/to/modules/lg-share.js"></script>
<script src="/path/to/modules/lg-thumbnail.js"></script>
<!-- HTML5/YOUTUBE/VIMEO Video -->
<script src="/path/to/modules/lg-video.js"></script>
<script src="/path/to/modules/lg-zoom.js"></script>

Create an image/video gallery with Html5 data-* attributes.

Here, we created an id assigning lightGallery with the class attribute gallery.

<ul id="lightGallery" class="gallery">
  <li data-title="Title 1" data-desc="Description 1" data-responsive-src="mobile1.jpg" data-src="img1.jpg"> <a href="#"> <img src="thumb1.jpg" /> </a> </li>
  <li data-title="Title 2" data-desc="Description 2" data-responsive-src="mobile2.jpg" data-src="img2.jpg"> <a href="#"> <img src="thumb2.jpg" /> </a> </li>
  <li data-title="Title 3" data-desc="Description 3" data-responsive-src="mobile3.jpg" data-src="img3.jpg"> <a href="#"> <img src="thumb3.jpg" /> </a> </li>
  ...
</ul>

Initialize the gallery lightbox with default settings.

Finally, you need to initiate the gallery by adding the following code.

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

Done