Elegant Any Content Gallery Lightbox In Pure JavaScript – GLightbox

Category: Gallery , Modal & Popup , Recommended | March 13, 2022
Views Total:5,423 views
Official Page:Go to website
Last Update:March 13, 2022


Elegant Any Content Gallery Lightbox In Pure JavaScript – GLightbox


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


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

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>

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
// back to prev slide
// goto next slide
// get active slide
// play video in the specified slide.
// pause video in the specified slide.
// close the gallery lightbox
// reload the gallery lightbox
// open the lightbox
// open the lightbox at specific index
// destroy the lightbox
// append a slide at specified index
myLightbox.insertSlide(object, index);
// remove a slide
// play video in the specified slide
// stop video in the specified slide.
// get the player instance of the specified slide.
myLightbox.getSlidePlayerInstance(object, index);
// get all players
// update the lightbox gallery elements.


v3.2.0 (03/13/2022)

  • New: Support for videos without extension
  • Updated: Plyr to 3.6.12
  • Fixed: Inline content not centered on tablets
  • Fixed: Duplicated CSS properties
  • Fixed: YouTube video button not clickable on iOS

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


  • Removed global body variable


  • delegate permissions to cross-origin iframes


  • Improved video autoplay


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

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

Leave a Reply