Press "Enter" to skip to content

Responsive Lightbox Gallery jQuery Plugin | lightGallery

lightGallery is a customizable, modular, responsive, lightbox gallery for jQuery. This plugin displays a full-screen photo/video gallery on a full-screen lightbox with CSS3 transition effects.

responsive lightbox image gallery jquery, responsive grid gallery with lightbox popup, jquery carousel slider with lightbox, lightbox jquery cdn, onclick image popup jquery

How to make use of it:

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

Responsive-Lightbox-Gallery-jQuery-Plugin


See Demo And Download

Official Website(sachinchoolur): Click Here

This superior jQuery/javascript plugin is developed by sachinchoolur. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.