Elegant Any Content Gallery Lightbox In Pure JavaScript – GLightbox

Category: Gallery , Modal & Popup , Recommended | September 13, 2020
Author:biati-digital
Views Total:362 views
Official Page:Go to website
Last Update:September 13, 2020
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.
  • 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>

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 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.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

You Might Be Interested In:


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

Leave a Reply