Image/video Lightbox Gallery Plugin – lightGallery

File Size: 693.95 KB
Views Total: 1020 views
Last Update:January 01, 1970
Publish Date: January 01, 1970
Official Website: Go to website
License: MIT
Plugin Author:
Demo    Download

A Free jQuery Plugin with lightGallery is Responsive & Touch-Friendly jQuery Gallery Lightbox Plugin. A lightweight, modular, JavaScript image and video lightbox gallery plugin. User can use for multiple images or videos open with lightbox gallery.

More features:

  • 20+ transition animations.
  • Auto play when images loaded.
  • Infinite looping.
  • Supports youtube & vimeo videos, not just images.
  • Touch swipe support.
  • Pinch to zoom.
  • Virtual slides.
  • Image captions & descriptions support.
  • Arrows, thumbnails and keyboard navigation.
  • Cross browser. Supports all major browsers.
  • Easing options support.
  • Multiple instances on one page.
  • Works with React, Angular, and Vue.js.
  • And much more.

How to use :

Add source for java Script & CSS.

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

 Other load the core JavaScript and optional extensions.

<!-- 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>
<!-- <a href="">Thumbnail</a> -->
<script src="/path/to/modules/lg-thumbnail.js"></script>
<!-- HTML5/YOUTUBE/VIMEO Video -->
<script src="/path/to/modules/lg-video.js"></script>
<!-- <a href="">Zoom</a> -->
<script src="/path/to/modules/lg-zoom.js"></script>

Create an image/video Lightbox 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>

Add Script for Lightbox Gallery.

$(document).ready(function() {


List Of Version :


Mady Schaferhoff is an expert jQuery script at jQuerypost. He offers web development services to clients globally. He also loves sharing Html,CSS, jQuery knowledge through blog posts like this one.