Responsive & Touch-Friendly jQuery Gallery Lightbox Plugin - lightGallery

lightGallery is a lightweight, elegant, responsive, mobile-friendly jQuery JavaScript plugin for displaying an image/video gallery in a fullscreen lightbox with CSS3 transition effects.

The Vanilla JavaScript Version is available here.

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.

Table Of Contents:

• Options
• API methods
• Events

How to use it:

1. Load the latest version of jQuery library together with 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. Or load the core JavaScript and optional extensions of your choice in the document.

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

• data-src: the large version of your image/video
• href: the large version of your image/video
• data-sub-html: id or class name of an object(div) which contain your sub html.
• data-sub-html-url: url of the file which contain your sub html.
• data-html: id or class name of an object(div) which contain your html. used for inserting html5 videos
• data-poster: Poster image for your video
• data-responsive: List of images and viewport's max width separated by comma.Ex: img/1-375.jpg 375, img/1-480.jpg 480, img/1-757.jpg 757.
• data-srcset: srcset values
• data-sizes: srcset sizes
• data-iframe: Set true is you want to open your url in an iframe
• data-download-url: Download url for your image/video. Pass false if you want to hide the download button.
• data-width: Actual size of the image in px. used in zoom plugin to see the actual size of the image when you doubleclick on the image.
• data-facebook-share-url: Facebook share URL. Specify only if you want to provide separate share URL for the specific slide. By default, current browser URL will be taken.
• data-tweet-text: Tweet text
• data-twitter-share-url: Twitter share URL. Specify only if you want to provide separate share URL for the specific slide. By default, current browser URL will be taken.
• data-googleplus-share-url: GooglePlus share URL. Specify only if you want to provide separate share URL for the specific slide. By default, current browser URL will be taken.
• data-pinterest-share-url: Pinterest share URL. Specify only if you want to provide separate share URL for the specific slide. By default, current browser URL will be taken. Note: Pinterest requires absolute URL
• data-pinterest-text: Description for Pinterest post

4. Initialize the gallery lightbox with default settings.

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

5. The plugin comes with lots of options/callbacks to customize your lightbox gallery.

• mode: 'lg-slide': Type of transition between images: 'lg-slide', 'lg-fade', 'lg-zoom-in', 'lg-zoom-in-big', 'lg-zoom-out', 'lg-zoom-out-big', 'lg-zoom-out-in', 'lg-zoom-in-out', 'lg-soft-zoom', 'lg-scale-up', 'lg-slide-circular', 'lg-slide-circular-vertical', 'lg-slide-vertical', 'lg-slide-vertical-growth', 'lg-slide-skew-only', 'lg-slide-skew-only-rev', 'lg-slide-skew-only-y', 'lg-slide-skew-only-y-rev', 'lg-slide-skew', 'lg-slide-skew-rev', 'lg-slide-skew-cross', 'lg-slide-skew-cross-rev', 'lg-slide-skew-ver', 'lg-slide-skew-ver-rev', 'lg-slide-skew-ver-cross', 'lg-slide-skew-ver-cross-rev', 'lg-lollipop', 'lg-lollipop-rev', 'lg-rotate', 'lg-rotate-rev', 'lg-tube'
• cssEasing: 'ease', //'cubic-bezier(0.25, 0, 0.25, 1)',//
• easing: 'linear': Value for CSS "transition-timing-function" prop. and jQuery .animate().
• speed: 1000: Transition duration (in ms).
• height & width: Height and width of the gallery
• galleryId: 1: Gallery ID
• addClass: '': Add custom class for gallery.
• startClass: 'lg-start-zoom': Starting animation class for the gallery.
• backdropDuration: 150: Backdrop transtion duration
• hideBarsDelay: 6000: Delay for hiding gallery controls in ms. If 0 is passed via hideBarsDelay, lightGallery will not hide the toolbar and controls.
• useLeft: false: Force lightgallery to use css left property instead of transform.
• ariaLabelledby & ariaDescribedby: For Accessibility
• preload: 1: number of preload slides. will exicute only after the current slide is fully loaded. ex:// you clicked on 4th image and if preload = 1 then 3rd slide and 5th slide will be loaded in the background after the 4th slide is fully loaded.. if preload is 2 then 2nd 3rd 5th 6th slides will be preloaded.
• showAfterLoad: true: Show Content once it is fully loaded.
• selector: null: Custom selector property insted of just child.
• index: false: Allows to set which image/video should load when using dynamicEl.
• controls: true: Whether to display prev/next buttons.
• hideControlOnEnd: false: If true, prev/next button will be hidden on first/last image.
• loop: false: Allows to go to the other end of the gallery at first/last img.
• escKey: true: Whether lightGallery should be closed when user presses "Esc".
• keyPress: true: Enable keyboard navigation
• slideEndAnimatoin: true: Enable slideEnd animation
• mousewheel: true: Change slide on mousewheel
• getCaptionFromTitleOrAlt: true: Option to get captions from alt or title tags.
• appendSubHtmlTo: true: You can specify where the sub-html should be appended. '.lg-sub-html' or '.lg-item'.
• subHtmlSelectorRelative: Set to true if the selector in "data-sub-html" should use the current item as its origin.
• selectWithin: '': By default selectror element is taken from only inside the gallery element. Instead of that you can tell lightgallery to select element within a specific element.
• nextHtml: '': Custom html for next control
• prevHtml: '': Custom html for prev control
• iframeMaxWidth: '100%': Set maximum width for iframe.
• download: true: Enable download button. By default download url will be taken from data-src/href attribute but it supports only for modern browsers. If you want you can provide another url for download via data-download-url. Pass false in data-download-url if you want to hide download button for the particular slide.
• closable: true: allows clicks on dimmer to close gallery
• counter: false: Shows total number of images and index number of current image.
• appendCounterTo: '.lg-toolbar': Where the counter should be appended
• enableSwipe: true: Enables swipe support
• enableDrag: true: Enables desktop mouse drag support
• swipeThreshold: 50: How far user must swipe for the next/prev image (in px).
• dynamic: false: Set to true to build a gallery based on the data from "dynamicEl" opt.
• dynamicEl: []: Array of objects (src, thumb, caption, desc, mobileSrc) for gallery els.
• supportLegacyBrowser: Whether to support legacy browsers

$("#lightGallery").lightGallery({
  mode: 'lg-slide',

  // Ex : 'ease'
  cssEasing: 'ease',

  //'for jquery animation'
  easing: 'linear',
  speed: 600,
  height: '100%',
  width: '100%',
  addClass: '',
  startClass: 'lg-start-zoom',
  backdropDuration: 150,

  // Set 0, if u don't want to hide the controls 
  hideBarsDelay: 6000,

  useLeft: false,

  // aria-labelledby attribute fot gallery
  ariaLabelledby: '',

  //aria-describedby attribute for gallery
  ariaDescribedby: '',

  closable: true,
  loop: true,
  escKey: true,
  keyPress: true,
  controls: true,
  slideEndAnimatoin: true,
  hideControlOnEnd: false,
  mousewheel: true,

  getCaptionFromTitleOrAlt: true,

  // .lg-item || '.lg-sub-html'
  appendSubHtmlTo: '.lg-sub-html',

  subHtmlSelectorRelative: false,

  /**
   * @desc number of preload slides
   * will execute only after the current slide is fully loaded.
   *
   * @ex you clicked on 4th image and if preload = 1 then 3rd slide and 5th
   * slide will be loaded in the background after the 4th slide is fully loaded..
   * if preload is 2 then 2nd 3rd 5th 6th slides will be preloaded.. ... ...
   *
   */
  preload: 1,
  showAfterLoad: true,
  selector: '',
  selectWithin: '',
  nextHtml: '',
  prevHtml: '',

  // 0, 1
  index: false,

  iframeMaxWidth: '100%',

  download: true,
  counter: true,
  appendCounterTo: '.lg-toolbar',

  swipeThreshold: 50,
  enableSwipe: true,
  enableDrag: true,

  dynamic: false,
  dynamicEl: [],
  galleryId: 1,
  supportLegacyBrowser: true
});

6. Default options of optional extensions.

// autoplay addon
autoplay: false,
pause: 5000,
progressBar: true,
fourceAutoplay: false,
autoplayControls: true,
appendAutoplayControlsTo: '.lg-toolbar'

// hash addon
hash: true,
galleryId: 1,

// fullscreen addon
fullScreen: true,

// pager addon
pager: false,

// social share addon
share: true,
facebook: true,
facebookDropdownText: 'Facebook',
twitter: true,
twitterDropdownText: 'Twitter',
googlePlus: true,
googlePlusDropdownText: 'GooglePlus',
pinterest: true,
pinterestDropdownText: 'Pinterest',

// thumbnail addon
thumbnail: true,
animateThumb: true,
currentPagerPosition: 'middle', // 'left' or 'middle' or 'right'
thumbWidth: 100,
thumbContHeight: 100,
thumbMargin: 5,
exThumbImage: false,
showThumbByDefault: true,
toggleThumb: true,
pullCaptionUp: true,
enableThumbDrag: true,
enableThumbSwipe: true,
swipeThreshold: 50,
loadYoutubeThumbnail: true,
youtubeThumbSize: 1,
loadVimeoThumbnail: true,
vimeoThumbSize: 'thumbnail_small', // 'thumbnail_large' or 'thumbnail_medium' or 'thumbnail_small'
loadDailymotionThumbnail: true,

// video addon
videoMaxWidth: '855px',
autoplayFirstVideo: true,
youtubePlayerParams: false,
vimeoPlayerParams: false,
dailymotionPlayerParams: false,
vkPlayerParams: false,
videojs: false, // uses video.js library
videojsOptions: {},

// zoom addon
scale: 1,
zoom: true,
actualSize: true,
enableZoomAfter: 300,

// rotate addon
rotate: true,
rotateLeft: true,
rotateRight: true,
flipHorizontal: true,
flipVertical: true,

7. API Methods.

var $lg = $('#lightgallery');
$lg.lightGallery();
 
// go to the next slide
$lg.data('lightGallery').goToNextSlide();

// go to the prev slide
$lg.data('lightGallery').goToPrevSlide();

// go to a specific sldie
$lg.data('lightGallery').slide(3);

8. Events.

var $lg = $('#lightgallery');
$lg.lightGallery();

$lg.on('onBeforeOpen.lg', function(e){
  // do something
}, false);

$lg.on('onAfterOpen.lg', function(e){
  // do something
}, false);

$lg.on('onAferAppendSlide.lg', function(e){
  // event.detail.index - Index of the slide
}, false);

$lg.on('onAfterAppendSubHtml.lg', function(e){
  // event.detail.index - Index of the slide
}, false);

$lg.on('onSlideItemLoad.lg', function(e){
  // event.detail.index - Index of the slide
}, false);

$lg.on('onBeforeSlide.lg', function(e){
  // event.detail.prevIndex - Index of the previous slide
  // event.detail.index - Index of the slide
  // event.detail.fromTouch - true if slide function called via touch event or mouse drag
  // event.detail.fromThumb - true if slide function called via thumbnail click
}, false);

$lg.on('onAfterSlide.lg', function(e){
  // event.detail.prevIndex - Index of the previous slide
  // event.detail.index - Index of the slide
  // event.detail.fromTouch - true if slide function called via touch event or mouse drag
  // event.detail.fromThumb - true if slide function called via thumbnail click
}, false);

$lg.on('onBeforePrevSlide.lg', function(e){
  // event.detail.index - Index of the slide
  // event.detail.fromTouch - true if slide function called via touch event or mouse drag
}, false);

$lg.on('onBeforeNextSlide.lg', function(e){
  // event.detail.index - Index of the slide
  // event.detail.fromTouch - true if slide function called via touch event or mouse drag
}, false);

$lg.on('onDragstart.lg', function(e){
  // do something
}, false);

$lg.on('onDragmove.lg', function(e){
  // do something
}, false);

$lg.on('onDragend.lg', function(e){
  // do something
}, false);

$lg.on('onSlideClick.lg', function(e){
  // do something
}, false);

$lg.on('onBeforeClose.lg', function(e){
  // do something
}, false);

$lg.on('onCloseAfter.lg', function(e){
  // do something
}, false);

About author:

Author: Sachin

Homepage: http://sachinchoolur.github.io/lightGallery/

Changelog:

2022-01-12

• Vanilla JS version updated. Download Here.

v1.10.0 (2020-11-07)

• Upgrad from frooglaloop to vimeo player.js
• Update video js error message
• Enhance autoplay support
• Add support for player.vimeo.com/video/<video_id>

v1.9.1beta (2020-10-29)

• Add option to turn off hiding toolbar and controls. If 0 is passed via hideBarsDelay, lightGallery will not hide the toolbar and controls.
• New supportLegacyBrowser option
• Better error messaging
• Minor bug fixes
• Add support for player.vimeo.com/video/<video_id>

2020-09-21

• Doc updated

2020-09-19

• v1.8.3

2016-01-05

• v1.2.13: Fixed zoom module issues..

2016-01-03

• v1.2.12: Added double tap support for touch devices.

2015-12-30

• v1.2.11: minor update.

2015-12-18

• v1.2.9: update.

2015-12-13

• v1.2.8: update.

2015-10-03

• v1.2.5: update.

2015-09-26

• v1.2.4: bugfix

2015-09-23

• v1.2.3: fixed an issue when use video gallery with only one video.

2015-09-08

• v1.2.1: bugfix.

2015-09-03

• Improved zoom plugin

2015-08-26

• Version 1.2.0 release.

2015-03-30

• Version 1.1.5 release.

2015-03-29

• Support for youtube player parameters

2014-11-04

• v1.1.4

2014-11-03

• Fixed: Escape does not close the gallery when it contains only one image

2014-10-02

• Fixed for IE8.

2014-09-25

• Fixed Escape does not close the gallery when it contains only one image

2014-09-17

• Fixed position problem #lightGallery-action

2014-09-16

• v1.1.3

2014-09-02

• Fixed issue 'Add options to include hyperlinks in caption and description

2014-07-22

• Fixed doesnt work on ios

2014-07-01

• Fixed 'hideControlOnEnd' issues..

2014-06-27

• Fixed slide preload issue..

2014-06-13

• Improve youtube/vimeo regex

2014-05-07

• Equal height thumbnails

2014-04-22

• Navigation arrows on iOS skipping 2 slides instead of 1

2014-04-11

• Fixed ie8 font icons issue 'Invisible buttons on IE8 #19'

2014-04-03

• fixed captionLinks and navigation for touch devices

2014-04-02

• Update lightGallery.js

2014-03-27

• Update lightGallery.js

2014-03-22

• fixed issue"Portrait Image Thumbnails"

2014-03-15

• Fixed issue.

2014-03-06

• Fixed issue "Slide effect at second opening"

---

This awesome jQuery plugin is developed by sachinchoolur. For more Advanced Usages, please check the demo page or visit the official website.