Press "Enter" to skip to content

Stylish Any Lightbox Gallery Content in Pure JavaScript | GLightbox

GLightbox is a pure JavaScript lightbox. It can display images, iframes, embedded content, and videos with optional autoplay for YouTube, Vimeo, and even self-hosted videos.

Simplified rendering of Pure Javascript with mobile support. It can handle images and videos with autoplay, embedded content, and iframes.


  • Small – only 11KB Gzipped
  • Fast and responsive – works with any screen size
  • Gallery support – create multiple galleries
  • Video Support – Youtube, Vimeo, and self-hosted videos with autoplay
  • Embedded Content Support – View any embedded content
  • Iframe Support – Need to include an iframe? there is no problem
  • Keyboard navigation – ESC, arrow keys, tab, and input is all you need
  • Touch Navigation – touch events on mobile phone
  • Zoom in and Zoom out – Zoom in and out on pictures on mobile and desktop
  • API – Control Lightbox with Available Methods
  • Customizable – create your own skin or tweak the animation with some slight CSS changes

How to make use of it:

Import the ‘glightbox.css’ and ‘glightbox.js’ into the doc.

<link href="dist/css/glightbox.css" rel="stylesheet">
<script src="dist/js/glightbox.js"></script>

Specify the content to be loaded within the gallery lightbox using ‘href’ attribute.

<a href="" class="glightbox-demo">
  // Add Image Here

<a href="!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+York%2C+EE.+UU.!5e0!3m2!1ses-419" class="glightbox-demo">
  // Add Image Here

<a href="" class="glightbox-demo">
 // Add Image Here

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

<a href="1.jpg" class="glightbox-demo" data-glightbox="title:Description Bottom; description: You can set the position of the desciption">
  // Add Image Here
  <div class="glightbox-desc">
    <p>Description here</p>

Initialize the Glightbox library and executed it.

var myLightbox = GLightbox({
    'selector': 'glightbox-demo'

You may also outline the content within the JavaScript using the components option.

var myLightbox = GLightbox({ 
    elements: [
        'href': '1.jpg',
        'type': 'image',
        'title': 'My Title',
        'description': 'Example',
        'href': '',
        'type': 'video',
        'source': 'youtube',
        'width': 900

Here is a listing of all attainable options and callback features 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: '', // Default not required to include
      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 strategies.

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

responsive lightbox image gallery, Image gallery HTML CSS, GLightbox Plugin/Github

See Demo And Download

Official Website(biati-digital): Click Here

This superior jQuery/javascript plugin is developed by biati-digital. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.