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.
• Fully accessible with keyboard interactions.
• 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>

<a href="deafult.jpg" class="glightbox-demo" data-title="Responsive example"
data-description="Your browser will choose the optimal image for the resolution"
data-sizes="(max-width: 600px) 480px, 800px"
data-srcset="img480.jpx 480w img800.jpg 800w">
  <img src="small.jpg" 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,

    // if true video will be focused on play to allow keyboard sortcuts for the player
    // this will deactivate prev and next arrows to change slide so use it only if you know what you are doing
    autofocusVideos: false,

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

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

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

    // enable zoomable
    zoomable: true,

    // enable touch navigation
    touchNavigation: true,

    // image follow axis when dragging on mobile.
    touchFollowAxis: 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' }
    }

  // enable draggable
  draggable: true,

  // number of pixels the user has to drag to go to prev or next slide
  dragToleranceX: 40,

  // used with draggable. Number of pixels the user has to drag up or down to close the lightbox (Set 0 to disable vertical drag)
  dragToleranceY: 65,

  // if true the slide will automatically change to prev/next or close if dragToleranceX or dragToleranceY is reached, otherwise it will wait till the mouse is released.
  dragAutoSnap: false,

  // enable image preload
  preload: true,

  // custom SVG icons
  svg: {},

    // callbacks
    beforeSlideChange: function(prevSlide, currentSlide) {},
    afterSlideChange: function(prevSlide, currentSlide) {},
    beforeSlideLoad: function(slideData) {},
    afterSlideLoad: function(slideData) {},
    slideInserted: function(slideData) {},
    slideRemoved: function(deletedIndex) {},
    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();
myLightbox.getActiveSlideIndex();

// play video in the specified slide.
myLightbox.slidePlayerPlay(number);

// pause video in the specified slide.
myLightbox.slidePlayerPause(number);
​
// close the gallery lightbox
myLightbox.close();

// reload the gallery lightbox
myLightbox.reload();

// open the lightbox
myLightbox.open(node);

// open the lightbox at specific index
myLightbox.openAt(index);

// destroy the lightbox
myLightbox.destroy();

// append a slide at specified index
myLightbox.insertSlide(object, index);

// remove a slide
myLightbox.removeSlide(index);

// play video in the specified slide
myLightbox.playSlideVideo(index);

// stop video in the specified slide.
myLightbox.stopSlideVideo(index);

// get the player instance of the specified slide.
myLightbox.getSlidePlayerInstance(object, index);

// get all players
myLightbox.getAllPlayers();

// update the lightbox gallery elements.
myLightbox.setElements([]);

Changelog:

v3.1.0 (08/29/2021)

• New: Added Avif image support
• New: Add support for responsive images
• Updated: playsinline video attribute
• Updated: url check to allow query parameters in video and images
• Fixed: Image description/shadow off on mobile device
• Fixed: You can zoom next slide image if current slide is not full height
• Fixed: Draggable option not working with “setElements”

v3.0.9 (05/23/2021)

• Updated: Plyr to 3.6.8
• Improved: JS error when the description attribute is an invalid selector
• Fixed: Media Buttons Not responding on Android
• Fixed: When touch is activated images swipe independently of their descriptions
• Fixed: Width / Height data attributes do not work for image types
• Fixed: Adds missing size unit of video description on resize

v3.0.8 (04/10/2021)

• New: Added Aria-hidden on all root elements except the glightbox-container
• Fixed: Video in portrait mode is cropped
• Fixed: Video always has maxWidth 900px because of hardcoded setting
• Fixed: Removed explicit tabindex from navigation buttons

v3.0.7 (01/05/2021)

• Fixed: Lightbox playing incorrect video with multiple videos in gallery
• Fixed: Draggable: false option not working
• Fixed: Links not working inside inline content in mobile devices
• Fixed: moreLength not working correctly on mobile if description has HTML
• Added: Added plugins option for a future release that will allow extending GLightbox with plugins
• Changed: Plyr fullscreen set to iosNative
• Changed: Renamed skin option to theme for a future release that will allow creating themes like plugins, skin still works but will be replaced in a future relase

v3.0.6 (11/30/2020)

• Fixed: Events cleanup on destroy() method causes exception
• Fixed: “data-title” Getting Overwritten when “title” is present
• Fixed: IE 11 “Multiple definitions of a property not allowed in strict mode when bundling and minifying glightbox
• Fixed: Cannot add new slides
• Fixed: Video not playing on mobile
• Improved: Plyr will only be loaded if it’s already used in the site
• New: Updated PLYR version to 3.6.3
• New: Added new option “autofocusVideos” to enable all Plyr shortcuts for the video player
• New: Improved events to use a generic way to access data
• New: Improved code

v3.0.5 (09/13/2020)

• Fixed: IE11 does not support “.includes()”
• Fixed: Clicking outside the content to close only works in specific areas
• Fixed: openEffect / closeEffect no longer accepting “none”

v3.0.4 (08/17/2020)

• New: New way to listen for events, the old events will still work but will be removed in a future update
• New: Added new methods “slidePlayerPause” and “slidePlayerPlay” so in the future they will replace “playSlideVideo” and “stopSlideVideo” to provide support for audio slides in a future update
• New: Add preventDefault via touchstart on lightbox to prevent navigation swipe
• Fixed: e.getAttribute is not a function when there are no nodes in the gallery

v3.0.3 (07/31/2020)

• New: Option “dragAutoSnap” to control the mouse drag auto close or change slide
• Fixed: Multiple galleries not working
• Fixed: Setting the elements directly using an object triggered error

v3.0.2 (07/28/2020)

• New: Option “zoomable” to enable or disable zoomable images
• New: Option “preload” to enable or disable preloading
• New: Option “draggable” to go to prev/next slide by mouse dragging. Thanks to @Hirbod for the donation to make this happen
• New: Option “dragToleranceX” Used with draggable. Number of pixels the user has to drag to go to prev or next slide
• New: Option “dragToleranceY” Used with draggable. Number of pixels the user has to drag up or down to close the lightbox (Set 0 to disable vertical drag)
• New: The code was refactored to make it easier to maintain
• Fixed: data gallery stopped working
• Fixed: iOS bug with Vimeo iframe when fullscreen button pressed
• Fixed: “See more” link in the description throws an JS error when clicked
• Fixed: Videos not resized vertically when window height was smaller that the window width

v3.0.1 (07/05/2020)

• Bug fixes and improvements

v3.0.0 (06/22/2020)

• New: New methods to access player instances “getSlidePlayerInstance(index or node) and getAllPlayers”
• New: Access player instance from afterSlideChange and beforeSlideChange methods
• New: New Method removeSlide remove slide at the specified index, it works even when the lightbox is open
• New: insertSlide now works even when the lightbox is open
• New: Added Accesibility features to slides
• New: Enabled touchNavigation for all devices that support touch events and not only mobile devices
• Changed: afterSlideLoad and beforeSlideLoad methods to follow the same variables as afterSlideChange, beforeSlideChange
• Fixed: Calling destroy() throws an error when modal is not open
• Fixed: Navigation not disabled correctly when only one slide

v2.0.6 (05/09/2019)

• New: Now you can define width and height as 900px, 95%, 100vw, 100vh so you can have full screen content
• New: Now you can define custom html or a node in the slide data to append it to the slide (view the API section)
• New: Now you can use any attribute as selector for example ‘.glightbox’ or ‘data-glightbox’ or ‘*[data-glightbox]’
• New: Method “openAt” you can open the lightbox at specific index eg: lightbox.openAt(2);
• New: Method “insertSlide” that allows you to append a slide at specified index
• Fixed Tab Key Doesn’t Work on Form Within GLightbox Inline Content
• Fixed Scrolling Description triggers closing the lightbox on touch devices
• Fixed Page jumps depending on page scrollbar
• Fixed Overriding default plyr settings does not merge correctly
• Fixed fullscreen video button on ios
• Moved plyr.ratio to plyr.config.ratio

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