Responsive & Touch-Friendly jQuery Gallery Lightbox Plugin – lightGallery

Gallery
Demo    Download
File Size: 1.8 MB
Views Total: 138 views
Last Update:November 19, 2020
Publish Date: November 10, 2020
Official Website: Go to website
License: MIT

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 :

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

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

2. load with core JavaScript and optional extensions on your choice.

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

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

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

3. Initialize the gallery lightbox with default settings.

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

Done


Nola Arney

Nola Arney is a full stack web developer who has worked at companies of various shapes and sizes, and with technologies just as diverse. Her ambition for development is only matched by his desire to find the perfect meme for every occasion.