GLightbox.

Code name "Gie" A touchable Pure Javascript
lightbox with mobile and video support.

Simple Image Gallery

Images with Description

You can add descriptions to your slides, the description position can be set globally for all slides or you can set a different position for each slide. options are: top, bottom, left or right. You can adjust the style the way you want with basic CSS. The description can display html code.

Videos Gallery

You can add videos with optional autoplay for Vimeo, Youtube and even self hosted videos (And optionally enable JWPlayer). You can specify a default width and height for the videos or set different widths and heights to each video in your gallery.

Iframes and Inline Elements

You can easily add iframes by simply entering the url, it could be a web page, a video, google maps, etc. also you can display any div of your page by entering the ID in the href attribute.

Usage

Simple usage

Slide options

Slide options in different data attributes



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
afterSlideChange
Trigger a callback after the slide is changed. Type: function default: null
beforeSlideLoad
Trigger a callback before a slide is loaded, the callback will only be called once. Type: function default: null
afterSlideLoad
Trigger a callback after a slide is loaded, the callback will only be called once. Type: function default: null
autoplayVideos
Autoplay videos on open. Type: boolean default: true
jwplayer
JW Player configuration. Type: object
vimeo
vimeo configuration. Type: object
youtube
Youtube configuration. Type: object

API

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

Download View Source