Responsive Lightbox Gallery With Pure JavaScript And CSS3 – lightGallery

Category: Gallery , Javascript , Modal & Popup , Recommended | September 3, 2018
Author: sachinchoolur
Views Total: 4,135
Official Page: Go to website
Last Update: September 3, 2018
License: MIT

Preview:

Responsive Lightbox Gallery With Pure JavaScript And CSS3 – lightGallery

Description:

lightGallery.js is a responsive, touch-enabled, dependency-free JavaScript lightbox gallery library which 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:

Load the core style sheet lightgallery.css in the head section of the document.

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

Load the core JavaScript lightgallery.js and addons of your choice at the end of the document.

<script src="js/picturefill.min.jsf"></script>
<script src="js/lightgallery.js"></script>
<script src="js/lg-pager.js"></script>
<script src="js/lg-autoplay.js"></script>
<script src="js/lg-fullscreen.js"></script>
<script src="js/lg-zoom.js"></script>
<script src="js/lg-hash.js"></script>
<script src="js/lg-share.js"></script>

The required html structure for the gallery.

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

Initialize the lightGallery with default options.

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

All configuration options with default values.

// '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,
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: [],

galleryId: 1

API methods.

Changelog:

v1.1.1 (09/03)

  • lg-thumbnail bug fix

You Might Be Interested In:

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

Leave a Reply