Elegant Any Content Gallery Lightbox In Pure JavaScript – GLightbox

Category: Gallery , Modal & Popup | November 18, 2019
Author: biati-digital
Views Total: 2,599
Official Page: Go to website
Last Update: November 18, 2019
License: MIT

Preview:

Elegant Any Content Gallery Lightbox In Pure JavaScript – GLightbox

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
    loop: 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.5 (11/18/2019)

  • New: Loop, renamed loopAtEnd to loop and now works in both directions
  • New: added touchFollowAxis, for mobile when dragging the media will follow the same axis, set to false to move media as you wish
  • New: added jpe format
  • Fixed .mov videos not recognized as videos

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

You Might Be Interested In:


2 thoughts on “Elegant Any Content Gallery Lightbox In Pure JavaScript – GLightbox

Leave a Reply