Image/video Lightbox Gallery Plugin – lightGallery

Gallery
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="https://www.jquerypost.com/tag/thumbnail/">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="https://www.jquerypost.com/tag/image-zoom/">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>
  ...
</ul>

Add Script for Lightbox Gallery.

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

Done

List Of Version :

Mady

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.