GLightbox | A touchable pure Javascript lightbox

Usage

Simple usage


// HTML
<a href="demo/img/large/gm1.jpg" class="glightboxTest">
  <img src="demo/img/small/gm1.jpg">
</a>

// Javascript
var lightboxDescription = GLightbox({
  selector: 'glightboxTest'
});

Slide options


// HTML
<a href="demo/img/large/gm1.jpg" class="glightboxTest" data-glightbox="title: Lightbox title; description: This is the description of the slide">
  <img src="demo/img/small/gm1.jpg">
</a>

// Javascript
var lightboxDescription = GLightbox({
  selector: 'glightboxTest'
});

Slide options in different data attributes


// HTML
// You can set each option in a different data attribute
<a href="demo/img/large/gm1.jpg" class="glightboxTest" data-title="Lightbox title" data-description="This is the description of the slide" data-type="image">
  <img src="demo/img/small/gm1.jpg">
</a>

// Javascript
var lightboxDescription = GLightbox({
  selector: 'glightboxTest'
});

Available Slide options

title

The title of the slide. Type: string

description

The description of the slide. Type: string

descPosition

The position of the description. Options: top|bottom|left|right

href

The source of the lightbox. Type: string

type

Define the type of media. Options: image|iframe|video|inline

Lightbox Options

selector

Class name of the element. Type: string default: "glightbox"

skin

Name of the skin, it will add a class to the lightbox so you can style it with css. Type: string default: "clean"

openEffect

Name of the effect on lightbox open. Type: string default: "zoomIn" // zoomIn, fade, zoom, none

closeEffect

Name of the effect on lightbox close. Type: string default: "zoomOut" // zoomOut, fade, zoom, none

slideEffect

Name of the effect on slide change. Type: string default: "slide" //fade, slide, zoom, none

moreText

More text for descriptions on mobile devices. Type: string default: "See more"

moreLength

The number of characters to display on the description before adding the moreText link (only for mobiles), if 0 it will display the entire description. Type: int default: 60

closeButton

Show or hide the close button. Type: boolean default: true

touchNavigation

Enebale or disable the touch navigation (swipe) Type: boolean default: true

keyboardNavigation

Enebale or disable the keyboard navigation Type: boolean default: true

closeOnOutsideClick

Close the lightbox when clicking outside the active slide Type: boolean default: true

startAt

Start lightbox at defined index. Type: numeric default: 0

width

Default with for inline elements and iframes, you can define a specific size on each slide. Type: numeric default: 900

height

Default height for inline elements and iframes, you can define a specific size on each slide. Type: numeric default: 506

videosWidth

Default width for videos, you can define a specific size on each slide. Type: numeric default: 900

videosHeight

Default height for videos, you can define a specific size on each slide. Type: numeric default: 506

descPosition

Global position for slides description, you can define a specific position on each slide. Type: string default: "bottom"

loopAtEnd

Loop at end. Type: boolean default: false

onOpen

Procide a callback when the lightbox is opened for the first time. Type: function default: null

onClose

Procide a callback when the lightbox is closed. Type: function default: null

beforeSlideChange

Trigger a callback before the slide is changed. Type: function default: null

beforeSlideChange: function(prevSlide, slide) {
  console.log(slide);
}

afterSlideChange

Trigger a callback after the slide is changed. Type: function default: null

afterSlideChange: function(prevSlide, activeSlide) {
  console.log(activeSlide);
}

beforeSlideLoad

Trigger a callback before a slide is loaded, the callback will only be called once. Type: function default: null

beforeSlideLoad: function(slide, data) {
  console.log(slide);
}

afterSlideLoad

Trigger a callback after a slide is loaded, the callback will only be called once. Type: function default: null

afterSlideLoad: function(slide, data) {
  console.log(slide);
}

autoplayVideos

Autoplay videos on open. Type: boolean default: true

jwplayer

JW Player configuration. Type: object

jwplayer: {
  api: "url to jwplayer js file",
  licenseKey: "your jwplayer license",
  params: {
      width: '100%',
      aspectratio: '16:9',
      stretching: 'uniform',
      .....
  }
}

vimeo

vimeo configuration. Type: object

vimeo: {
  api: "https://player.vimeo.com/api/player.js",
  params: {
      api: 1,
      title: 0,
      byline: 0,
      .....
  }
}

youtube

Youtube configuration. Type: object

youtube: {
  api: "https://www.youtube.com/iframe_api",
  params: {
      enablejsapi: 1,
      showinfo: 0,
      .....
  }
}

API

There are multiple methods available so you can control the lightbox in any way you want.

var myLightbox = GLightbox({
  'selector': 'glightbox',
  ......
});


// Go to a specific slide
myLightbox.goToSlide(2);


// Prev slide
myLightbox.prevSlide();


// Next slide
myLightbox.nextSlide();


// Get active slide. It will return the active node
myLightbox.getActiveSlide();


// Get active slide index
myLightbox.getActiveSlideIndex();


// Play slide video in specific slide
myLightbox.playSlideVideo(2);


// Stop slide video in specific slide
myLightbox.stopSlideVideo(2);


// Update the lightbox gallery elements
myLightbox.setElements([
  {
    'href': 'https://picsum.photos/1200/800',
    'type': 'image'
  },
  {
    'href': 'https://www.youtube.com/watch?v=Ga6RYejo6Hk',
    'type': 'video',
    'source': 'youtube', //vimeo, youtube or local
    'width': 900,
    'height': 560
  }
]);


// Open the lightbox
// @param {node} optional node to open
// if not provided it will find the gallery elements
// by the provided selector name
// or you can use setElements before the open method
myLightbox.open(node);


// Close the lightbox
myLightbox.close();

// Reload the lightbox, after inserting content with ajax
// the reload method will atach the listeners to the
// new elements and ignore all the other existing
// elements to avoid duplicated listeners
myLightbox.reload();


// Destroy the lightbox
myLightbox.destroy();

GLightbox.

Simple Image Gallery

Images with Description

Videos Gallery

Iframes and Inline Elements