Lightgallery is very simple and easy to use jquery plugin for lightbox gallery. It supports Youtube, Vimeo and HTML5 videos. It can be added many dependencies to append on the lightbox as an extra feature.

Features:

Install with Bower

$ bower install lightgallery

Install with npm

$ npm install lightgallery

How to use it:

1. Load the Lightgallery’s stylesheet file in the document.

<link rel="stylesheet" href="path/to/lightgallery.min.css">

2. Load the Lightgallery’s JavaScript files in the document.

<script src="path/to/lightgallery.min.js"></script>

3. Add the HTML structure to create a lightbox.

<div id="basic-gallery">
  <a href="path/to/demo-1.jpg">
    <img src="path/to/demo-1.jpg" />
  </a>
  <a href="path/to/demo-2.jpg">
    <img src="path/to/demo-2.jpg" />
  </a>
</div>

4. Initialize the lightGallery and we're ready to go.

$('#basic-gallery').lightGallery();

*Don't forget to add lightGallery font within your project fonts folder. It can be found in lightGallery-master\src\fonts. Without the fonts, icon's of lightGallery will not show.

HTML Markup

You can use different types of markup as per your project needs, but the script needs to modify as per the HTML markup. Please check some markup below and use anything that suits you.

- HTML Markup with ul > li

<ul id="gallery-ul-li">
  <li data-src="path/to/demo-1.jpg">
      <img src="path/to/demo-1.jpg" />
  </li>
  <li data-src="path/to/demo-2.jpg">
      <img src="path/to/demo-2.jpg" />
  </li>
</ul>
$('#gallery-ul-li').lightGallery();

- HTML Markup with separate <div>

<div id="selector1">
  <h2>Gallery title</h2>
  <div class="item" data-src="path/to/demo-1.jpg">
      <img src="path/to/demo-1.jpg" />
  </div>
  <div class="item" data-src="path/to/demo-2.jpg">
      <img src="path/to/demo-2.jpg" />
  </div>
</div>
$('#selector1').lightGallery({
    selector: '.item'
});

- HTML Markup to link with text.

<a id="selector2" href="path/to/demo-1.jpg">
  Click to open
</a>
$('#selector2').lightGallery({
  selector: 'this'
});

Core options of lightGallery

Name type default description
mode string 'lg-slide' Type of transition between images. lightGallery comes with lots of transition effects such as '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 string 'ease' Type of easing to be used for css animations
easing string 'linear' Type of easing to be used for jquery animations
speed number 600 Transition duration (in ms).
height string '100%' Height of the gallery. ex: '100%' , '300px'
width string '100%' Width of the gallery. ex: '100%' , '300px'
addClass string '' Add custom class for gallery, can be used to set different style for different gallery
startClass string 'lg-start-zoom' Starting animation class for the gallery.
backdropDuration number 150 Lightgallery backdrop transtion duration. Do not change the value of backdrop via css.
hideBarsDelay number 6000 Delay for hiding gallery controls in ms
useLeft boolean false force lightgallery to use css left property instead of transform.
closable boolean true allows clicks on dimmer to close gallery.
loop boolean true If false, will disable the ability to loop back to the beginning of the gallery when on the last element.
escKey boolean true Whether the LightGallery could be closed by pressing the "Esc" key.
keyPress boolean true Enable keyboard navigation
controls boolean true If false, prev/next buttons will not be displayed.
slideEndAnimatoin bolean true Enable slideEnd animation
hideControlOnEnd boolean false If true, prev/next button will be hidden on first/last image. false if slideEndAnimatoin or loop is enabled.
mousewheel boolean true Change slide on mousewheel
getCaptionFromTitleOrAlt: boolean true Option to get captions from alt or title tags.
appendSubHtmlTo string '.lg-sub-html' You can specify where the sub-html should be appended. '.lg-sub-html' or '.lg-item'
subHtmlSelectorRelative boolean false Set to true if the selector in "data-sub-html" should use the current item as its origin.
preload number 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 boolean true Show Content once it is fully loaded
selector string '' Custom selector property instead of just child. pass this to select same element ex : .class #id
selectWithin string '' 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. ex : .class #id
galleryItems = $(this.s.selectWithin).find(this.s.selector);
nextHtml string '' Custom html for next control
prevHtml string '' Custom html for prev control
index number 0 Allows to set which image/video should load initially
iframeMaxWidth string '100%' Set maximum width for iframe.
download boolean 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.
counter boolean true Whether to show total number of images and index number of currently displayed image.
appendCounterTo string '.lg-toolbar' Where the counter should be appended
swipeThreshold number 50 By setting the swipeThreshold (in px) you can set how far the user must swipe for the next/prev image.
enableDrag boolean true Enables desktop mouse drag support
enableSwipe boolean true Enables swipe support
dynamic boolean false LightGallery can be instantiated and launched programmatically by setting this option to true and populating dynamicEl option (see below) with the definitions of images.
dynamicEl array [] An array of objects (src, iframe, subHtml, thumb, poster, responsive, srcset sizes) representing gallery elements.

For more details you can visit the website - http://sachinchoolur.github.io/lightGallery/

Default example

HTML structure

<div id="basic-gallery">
    <a href="path/to/demo-1.jpg">
      <img src="path/to/demo-1.jpg" />
    </a>
    <a href="path/to/demo-2.jpg">
      <img src="path/to/demo-2.jpg" />
    </a>
</div>

Script

$('#basic-gallery').lightGallery();

Video gallery

HTML structure

<div id="video-gallery">
  <a href="https://www.youtube.com/watch?v=DGQwd1_dpuc&t=12s">
    <img src="path/to/image-1.jpg" />
    <div class="play-btn"><img src="path/to/play-button.png"></div>
  </a>
  <a href="https://vimeo.com/1084537">
    <img src="path/to/image-2.jpg" />
    <div class="play-btn"><img src="path/to/play-button.png"></div>
  </a>
</div>

Position the play button with CSS

.play-btn{
   width: 64px;
   height: 64px;
   position: absolute;
   left: 50%;
   top: 50%;
   margin-left: -32px;
   margin-top: -32px;
}

Script

$('#video-gallery').lightGallery();

**Include lg-video.min.js located in lightGallery-master\modules
**Include lg-thumbnail.min.js if you want to show thumbnail within lightbox. Located in lightGallery-master\modules

Video Player Parameters

$('#video-gallery').lightGallery({
    youtubePlayerParams: {
        modestbranding: 1,
        showinfo: 0,
        rel: 0,
        controls: 0
    },
    vimeoPlayerParams: {
        byline : 0,
        portrait : 0,
        color : 'A90707'
    }
});