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:

• It can be install with NPM and Bower
• Supports touch drag and mouse drag.
• Fully responsive.
• Super customizable.
• Multi devices and multi browsers supported.

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/

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

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

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

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

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

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