Elegant Any Content Gallery Lightbox In Pure JavaScript – GLightbox

Preview:

Description:

GLightbox is a simple yet powerful, mobile-friendly gallery lightbox plugin written in pure JavaScript and CSS/CSS3.

Features:

• Open/close animations: zoomIn, fade and zoom.
• Content slide animations: fade, slide, zoom.
• Support any content and even mixed content: images, HTML5 videos, Youtube/Vimeo videos, iframes, inline contents and much more.
• Lots of configuration options, callback functions, and API methods.

How to use it:

Import the ‘glightbox.css’ and ‘glightbox.js’ into the document.

<link href="dist/css/glightbox.css" rel="stylesheet">
<script src="dist/js/glightbox.js"></script>

Specify the content to be loaded in the gallery lightbox using ‘href’ attribute. Note that the grouped media content must have the same class.

<a href="https://vimeo.com/115041822" class="glightbox-demo">
  <img src="https://picsum.photos/400/300/?random" alt="image">
</a>

<a href="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12085.977306439116!2d-73.96648875371474!3d40.77314541916876!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c258bf08488f6b%3A0x618706a9142daa0d!2sUpper+East+Side%2C+Nueva+York%2C+EE.+UU.!5e0!3m2!1ses-419!2smx!4v1511830027642" class="glightbox-demo">
  <img src="https://picsum.photos/401/300/?random" alt="image">
</a>

<a href="https://www.youtube.com/watch?v=Ga6RYejo6Hk" class="glightbox-demo">
  <img src="https://picsum.photos/402/300/?random" alt="image">
</a>

To create Facebook like gallery lightbox with description boxes:

<a href="1.jpg" class="glightbox-demo" data-glightbox="title:Description Bottom; description: You can set the position of the desciption">
  <img src="thumb.jpg" alt="image">
  <div class="glightbox-desc">
    <p>Description here</p>
  </div>
</a>

Initialize the Glightbox library and done.

var myLightbox = GLightbox({
    'selector': 'glightbox-demo'
});

Here is a list of all possible options and callback functions to customize the gallery lightbox.

selector: 'glightbox',
skin: 'clean',
closeButton: true,
startAt: 0,
autoplayVideos: true,
descPosition: 'bottom',
width: 900,
height: 506,
videosWidth: 900,
videosHeight: 506,
beforeSlideChange: null,
afterSlideChange: null,
beforeSlideLoad: null,
afterSlideLoad: null,
onOpen: null,
onClose: null,
loopAtEnd: false,
jwplayer: {
  api: null,
  licenseKey: null,
  params: {
      width: '100%',
      aspectratio: '16:9',
      stretching: 'uniform'
  }
},
vimeo: {
  api: 'https://player.vimeo.com/api/player.js',
  params: {
      api: 1,
      title: 0,
      byline: 0,
      portrait: 0
  }
},
youtube: {
  api: 'https://www.youtube.com/iframe_api',
  params: {
      enablejsapi: 1,
      showinfo: 0
  }
},
openEffect: 'zoomIn', // fade, zoom
closeEffect: 'zoomOut', // fade, zoom
slideEffect: 'slide', // fade, slide, zoom,
moreText: 'See more',
slideHtml: '',
lightboxHtml: '',
cssEfects: {
  fade: { in: 'fadeIn', out: 'fadeOut' },
  zoom: { in: 'zoomIn', out: 'zoomOut' },
  slide: { in: 'slideInRight', out: 'slideOutLeft' },
  slide_back: { in: 'slideInLeft', out: 'slideOutRight' }
}

API methods.

// Goto slide 3
myLightbox.goToSlide(3);
​
// back to prev slide
myLightbox.prevSlide();
​
// goto next slide
myLightbox.nextSlide();
​
// get active slide
myLightbox.getActiveSlide();
​
// close the gallery lightbox
myLightbox.close();

Changelog:

v2.0.1 (04/28/2019)

• Fixed Mobile navigation
• Fixed slide width for external sources

02/17/2019

• Removed global body variable

02/15/2019

• delegate permissions to cross-origin iframes

02/07/2019

• Improved video autoplay

02/05/2019

• Bug fixes and improvements

v1.0.9 (12/06/2018)

• added svg to be displayed as an image
• Fixed error on IE11 – Multiple definitions of a property not allowed

v1.0.8 (10/16/2018)

• Fixes and improvements

v1.0.7 (09/02/2018)

• Fixes and improvements

v1.0.6 (06/08/2018)

• Bug fixes and improvements