1. Load the newest version of the jQuery library along with jQuery.

<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 non-compulsory extensions of your selection within the doc.

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

3. Create an image/video gallery with Html5 data-* attributes.

<ul id="lightGallery" class="gallery">
  // Add Images Here
  ...
</ul>

4. Initialize the gallery lightbox with default settings.

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

5. The plugin comes with a number of choices/callbacks to customize your lightbox gallery.

$("#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 choices of non-compulsory 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);

Responsive & Touch-Friendly jQuery Gallery Lightbox Plugin, lightGallery Plugin/Github

See Demo And Download