GLightbox | A touchable pure Javascript lightbox

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

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

GLightbox.

Simple Image Gallery

Images with Description

Videos Gallery

Iframes and Inline Elements

Usage and options

API