Responsive Lightbox Gallery With Pure JavaScript And CSS3 – lightGallery

Category: Gallery , Javascript , Modal & Popup , Recommended | October 14, 2020
Author:sachinchoolur
Views Total:226 views
Official Page:Go to website
Last Update:October 14, 2020
License:MIT

Preview:

Responsive Lightbox Gallery With Pure JavaScript And CSS3 – lightGallery

Description:

The Vanilla JavaScript Version of the lightGallery jQuery plugin.

lightGallery.js is a responsive, touch-enabled, dependency-free JavaScript lightbox gallery library that enables you to present various types of media (images, videos, etc) in a fullscreen, scalable, navigatable, shareable, downloadable and CSS3 animated gallery popup.

Basic usage:

1. Load the core stylesheet lightgallery.css in the head section of the document.

<link href="dist/css/lightgallery.css" rel="stylesheet">

2. Load the core JavaScript lightgallery.js and OPTIONAL modules of your choice at the end of the document. Download modules here:

<!-- Core -->
<script src="js/lightgallery.js"></script>
<!-- Autoplay -->
<script src="js/lg-autoplay.js"></script>
<!-- Fullscreen -->
<script src="js/lg-fullscreen.js"></script>
<!-- Hashtag -->
<script src="js/lg-hash.js"></script>
<!-- Pager -->
<script src="js/lg-pager.js"></script>
<!-- Social share -->
<script src="js/lg-share.js"></script>
<!-- Thumbnail -->
<script src="js/lg-thumbnail.js"></script>
<!-- HTML5/YOUTUBE/VIMEO Video -->
<script src="js/lg-video.js"></script>
<!-- Zoom -->
<script src="js/lg-zoom.js"></script>
<!-- Rotate -->
<script src="js/lg-rotate.js"></script>

3. The required HTML structure for the gallery. All possible 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
<ul id="lightgallery" class="list-unstyled row">
  <li data-responsive="img/1-375.jpg 375, img/1-480.jpg 480, img/1.jpg 800" 
      data-src="img/1-1600.jpg" 
      ata-sub-html="<h4>Image Description</p>" 
      data-pinterest-text="Pin it1" 
      data-tweet-text="share on twitter 1">
      <a href="">
        <img class="img-responsive" src="img/thumb-1.jpg">
      </a>
  </li>
  <li data-responsive="img/2-375.jpg 375, img/2-480.jpg 480, img/2.jpg 800" 
      data-src="img/2-1600.jpg" 
      ata-sub-html="<h4>Image Description</p>" 
      data-pinterest-text="Pin it1" 
      data-tweet-text="share on twitter 2">
      <a href="">
        <img class="img-responsive" src="img/thumb-2.jpg">
      </a>
  </li>
  <li data-responsive="img/3-375.jpg 375, img/3-480.jpg 480, img/3.jpg 800" 
      data-src="img/3-1600.jpg" 
      ata-sub-html="<h4>Image Description</p>" 
      data-pinterest-text="Pin it1" 
      data-tweet-text="share on twitter 3">
      <a href="">
        <img class="img-responsive" src="img/thumb-3.jpg">
      </a>
  </li>
</ul>

4. Initialize the lightGallery with default options.

lightGallery(document.getElementById('lightgallery'));

5. All configuration options with default values.

lightGallery(document.getElementById('lightgallery'),{

  // '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'
  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,

  // If 0 is passed via hideBarsDelay, lightGallery will not hide the toolbar and controls.
  hideBarsDelay: 6000,

  useLeft: false,

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

  getCaptionFromTitleOrAlt: true,

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

  subHtmlSelectorRelative: false,

  /**
   * @desc 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.. ... ...
   *
   */
  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,

  // An array of objects (src, iframe, subHtml, thumb, poster, responsive, srcset sizes) representing gallery elements.
  dynamicEl: [],

  // gallery ID
  galleryId: 1,

  // make the usage of picturefill libray optional as all modern browsers support srcset attribute
  supportLegacyBrowser: true
  
});

Default options of add-ons.

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

// hash addon
hash: 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',
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,
useLeftForZoom: getUseLeft()

6. API methods.

const el = document.getElementById('lightgallery');
lightGallery(el);

// goto a specific slide (slide 2)
window.lgData[el.getAttribute('lg-uid')].slide(1);

// goto the next slide
window.lgData[el.getAttribute('lg-uid')].goToNextSlide();

// back to the previous slide
window.lgData[el.getAttribute('lg-uid')].goToPrevSlide();

// destroy the instance
window.lgData[el.getAttribute('lg-uid')].destroy();

7. Event handlers:

el.addEventListener('onBeforeOpen', function(e){
  // do something
}, false);

el.addEventListener('onAfterOpen', function(e){
  // do something
}, false);

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

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

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

el.addEventListener('onBeforeSlide', 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);

el.addEventListener('onAfterSlide', 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);

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

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

el.addEventListener('onDragstart', function(e){
  // do something
}, false);

el.addEventListener('onDragmove', function(e){
  // do something
}, false);

el.addEventListener('onDragend', function(e){
  // do something
}, false);

el.addEventListener('onSlideClick', function(e){
  // do something
}, false);

el.addEventListener('onBeforeClose', function(e){
  // do something
}, false);

el.addEventListener('onCloseAfter', function(e){
  // do something
}, false);

Changelog:

v1.4.0 (10/14/2020)

  • Add option to turn off hiding toolbar and controls
  • Add supportLegacyBrowser option
  • Better error messaging
  • Minor bug fixes

v1.3.1 (09/19/2020)

  • Fix issue – Horizontal and vertical flip buttons class names are interchanged

v1.3.0 (09/01/2020)

  • Add rotate module

v1.2.1 (08/18/2020)

  • Remove unnecessary outline from the outer element.

v1.2.0 (07/29/2020)

  • Accessibility improvements

v1.1.1 (09/03/2018)

  • lg-thumbnail bug fix

You Might Be Interested In:


2 thoughts on “Responsive Lightbox Gallery With Pure JavaScript And CSS3 – lightGallery

  1. Daniel

    Great Lightbox! Just one question: How do I add several images to a slideshow while having only one thumbnail?
    I’d really appreciate some help 🙂

    Reply
  2. wy07

    Love the Lightbox! May I know how to create more than 1 gallery in a single page on WordPress? Am using tabs so each tab will have one gallery. Look forward to your reply. Thank you.

    Reply

Leave a Reply