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>

Create a Facebook like gallery lightbox and config the item using the following attributes:

• title
• description
• descPosition: bottom, top, left, right
• type: media type
• effect: slide, fade, zoom, none
• width
• height

<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'
});

You can also define the content in the JavaScript using the elements option.

var myLightbox = GLightbox({ 
    elements: [
      {
        'href': '1.jpg',
        'type': 'image',
        'title': 'My Title',
        'description': 'Example',
      },
      {
        'href': 'https://www.youtube.com/watch?v=Ga6RYejo6Hk',
        'type': 'video',
        'source': 'youtube',
        'width': 900
      }
  ],
});

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

var myLightbox = GLightbox({ 

    // default selector
    selector: 'glightbox',

    // define the elements in the JS
    elements: null,

    // skin class
    skin: 'clean',

    // shows close button
    closeButton: true,

    // initial slide index
    startAt: 0,

    // autoplay videos after open
    autoplayVideos: true,

    // bottom, top, left, right
    descPosition: 'bottom',

    // lightbox size
    width: 900,
    height: 506,

    // video size
    videosWidth: 900,
    
    // infinite loop
    loopAtEnd: false,

    // enable touch navigation
    touchNavigation: true,

    // enable keyboard navigation
    keyboardNavigation: true,

    // close the lightbox on click outside
    closeOnOutsideClick: true,

    // video player options
    plyr: {
      css: 'https://cdn.plyr.io/3.5.6/plyr.css', // Default not required to include
      js: 'https://cdn.plyr.io/3.5.6/plyr.js', // Default not required to include
      config: {
        muted: false,
        hideControls: true,
        youtube: {
            noCookie: true,
            rel: 0,
            showinfo: 0,
            iv_load_policy: 3
        },
        vimeo: {
            byline: false,
            portrait: false,
            title: false,
            speed: true,
            transparent: false
        }
      }
    },
   
    // zoom, fade, none
    openEffect: 'zoomIn',

    // zoom, fade, none
    closeEffect: 'zoomOut', 

    // slide, fade, zoom, none
    slideEffect: 'slide', // fade, slide, zoom,

    // more text
    moreText: 'See more',

    // max characters
    moreLength: 60,

    // additional HTML
    lightboxHtml: '',
    
    // CSS effects
    cssEfects: {
      fade: { in: 'fadeIn', out: 'fadeOut' },
      zoom: { in: 'zoomIn', out: 'zoomOut' },
      slide: { in: 'slideInRight', out: 'slideOutLeft' },
      slide_back: { in: 'slideInLeft', out: 'slideOutRight' }
    }

    beforeSlideChange: null,
    afterSlideChange: null,
    beforeSlideLoad: null,
    afterSlideLoad: null,
    onOpen: null,
    onClose: null,

});

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.4 (09/08/2019)

• Fixed some errors when zooming and dragging images
• Fixed description position not respected when configured globally
• Fixed local videos not resized correctly when entered fullscreen

v2.0.3 (09/02/2019)

• Fixed responsive videos not resizing correctly when resizing the window vertically
• Fixed responsive images not resizing correctly if they have description and the window height is lower that the slide height
• Fixed youtube video not detected correctly for urls like youtube(-nocookie).com/embed/…
• New: Zooming images. Now you can zoom images on desktop if image is too large
• New: Now you can also define the slide description using the content of any div you want.
• New: Replaced png icons with svg and added options to customize them.

v2.0.2 (08/28/2019)

• Fixed StartAt not taking specified index
• Removed JWPlayer because that player implemented some restrictions unless you pay for a license
• Improved mobile touch events, swipe, move, zoom, etc.
• Changed: Youtube now by default uses youtube-nocookie.com, you can enable cookies in the config with youtube.nocookie to false
• New: Plyr player, we have changed to this player so that wey only one api is managed instead of 3
• New: Added tabindex accesibility to loop the controls with the tab key
• New: Inside inline content you can close the lightbox by adding the class gtrigger-close to any element
• Removed option videosHeight. The height is automatic depending the video width and ratio.
• Removed Gulp and replaced for pure nodejs scripts

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