Glightbox is a pure javascript lightbox. It can display images, iframes, inline content and videos with optional autoplay for youtube, vimeo and even self hosted videos.
- Small - only 11KB Gzipped
- Responsive - works with any screen size
- Gallery Support - Create multiple galleries
- Video Support - Youtube, Vimeo and self hosted videos with autoplay
- Inline content support - display any inline content
- Iframe support - need to embed an iframe? no problem
- Keyboard Navigation - esc, arrows keys, tab and enter is all you need
- Touch Navigation - mobile touch events
- Zoomable images - zoom and drag images on mobile and desktop
- Api - control the lightbox with the provided methods
- Customizable - create your skin or modify the animations with some minor css changes
You can check the live demo right here
$ npm install glightbox
# OR
$ yarn add glightbox
# OR
$ bower install glightboximport GLightbox from 'glightbox'Or manually download and link glightbox.min.js in your HTML:
<link rel="stylesheet" href="dist/css/glightbox.css">
<script src="dist/js/glightbox.min.js"></script>
OR CDN
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css">
<script src="https://cdn.jsdelivr.net/gh/mcstudios/glightbox/dist/js/glightbox.min.js"></script>
<script type="text/javascript">
const lightbox = GLightbox({ ...options });
</script><!-- Simple image -->
<a href="large.jpg" class="glightbox">
<img src="small.jpg" alt="image">
</a>
<!-- Video -->
<a href="https://vimeo.com/115041822" class="glightbox2">
<img src="small.jpg" alt="image">
</a>
<!-- Gallery -->
<a href="large.jpg" class="glightbox3" data-gallery="gallery1">
<img src="small.jpg" alt="image">
</a>
<a href="video.mp4" class="glightbox3" data-gallery="gallery1">
<img src="small.jpg" alt="image">
</a>
<!-- Simple Description -->
<a href="large.jpg" class="glightbox4" data-glightbox="title: My title; description: this is the slide desciption">
<img src="small.jpg" alt="image">
</a>
<!-- Advanced Description -->
<a href="large.jpg" class="glightbox5" data-glightbox="title: My title; description: .custom-desc1">
<img src="small.jpg" alt="image">
</a>
<div class="glightbox-desc custom-desc1">
<p>The content of this div will be used as the slide description</p>
<p>You can add links and any HTML you want</p>
</div>You can specify some options to each individual slide, the available options are:
- title
- description
- descPosition
- type
- effect
- width
- height
<!-- One line config -->
<a href="large.jpg" data-glightbox="title: Your title; description: desciption here; descPosition: left; type: image; effect: fade; width: 900px; height: auto;"></a>
<!-- Multiple data attributes / You can use the options as separated data attributes -->
<a href="large.jpg" data-title="My title" data-description="desciption here" data-descPosition="right" data-type="image" data-effect="fade" data-width="900px" data-height="auto"></a>Example use of the options.
const lightbox = GLightbox({
touchNavigation: true,
loopAtEnd: true,
autoplayVideos: true,
onOpen: () => {
console.log('Lightbox opened')
},
beforeSlideLoad: (slide, data) => {
// Need to execute a script in the slide?
// You can do that here...
}
});
// Instead of using a selector, define the gallery elements
const myGallery = GLightbox({
elements: [
{
'href': 'https://picsum.photos/1200/800',
'type': 'image',
'title': 'My Title',
'description': 'Example',
},
{
'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,
}
],
autoplayVideos: true,
});
myGallery.open();
// If later you need to modify the elements you can use setElements
myGallery.setElements([...]);| Option | Type | Default | Description |
|---|---|---|---|
| selector | string | glightbox |
Class name of the elements. |
| elements | array | null |
Instead of passing a selector you can pass all the items that you want in the gallery. |
| skin | string | clean |
Name of the skin, it will add a class to the lightbox so you can style it with css. |
| openEffect | string | zoomIn |
Name of the effect on lightbox open. (zoom, fade, none) |
| closeEffect | string | zoomOut |
Name of the effect on lightbox close. (zoom, fade, none) |
| slideEffect | string | slide |
Name of the effect on slide change. (slide, fade, zoom, none) |
| moreText | string | See more |
More text for descriptions on mobile devices. |
| moreLength | number | 60 |
Number of characters to display on the description before adding the moreText link (only for mobiles), if 0 it will display the entire description. |
| closeButton | boolean | true |
Show or hide the close button. |
| touchNavigation | boolean | true |
Enable or disable the touch navigation (swipe). |
| keyboardNavigation | boolean | true |
Enable or disable the keyboard navigation. |
| closeOnOutsideClick | boolean | true |
Close the lightbox when clicking outside the active slide. |
| startAt | number | 0 |
Start lightbox at defined index. |
| width | number | 900 |
Default with for inline elements and iframes, you can define a specific size on each slide. |
| height | number | 506 |
Default height for inline elements and iframes, you can define a specific size on each slide. For inline elements you can set the height to auto. |
| videosWidth | number | 960 |
Default width for videos. Videos are responsive so height is not required. |
| descPosition | string | bottom |
Global position for slides description, you can define a specific position on each slide (bottom, top, left, right). |
| loopAtEnd | boolean | false |
Loop slide at end. |
| svg | object | {} |
Set your own svg icons |
| autoplayVideos | boolean | true |
Autoplay videos on open. |
| plyr | object | {} |
View video player options. |
| Option | Description |
|---|---|
| onOpen | Provide a function when the lightbox is opened for the first time. |
| onClose | Provide a function when the lightbox is closed. |
| beforeSlideChange | Trigger a function before the slide is changed beforeSlideChange: function(prevSlide, slide) {} |
| afterSlideChange | Trigger a function after the slide is changed afterSlideChange: function(prevSlide, activeSlide) {} |
| beforeSlideLoad | Trigger a function before a slide is loaded for the first time, the function will only be called once. beforeSlideLoad: function(slide, data) {} |
| afterSlideLoad | Trigger a function after a slide is loaded for the first time, the function will only be called once. afterSlideLoad: function(slide, data) {} |
Starting from version 2.0.2 glightbox droped support of JWPlayer because that player implemented new restrictions for the free edition, it was replaced with an awesome new player "Plyr" that also includes support for youtube and vimeo. So instead of maintaining 3 different apis now we only can focus on one. You can pass any Plyr option to the player, view all available options here Plyr options.
Please note that GLightbox will only inject the video player library if required and only when the lightbox is opened.
const lightbox = GLightbox({
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
}
}
}
});There are methods, setters and getters on a GLightbox object. The easiest way to access the GLightbox object is to set the return value from your call to a variable. For example:
const lightbox = GLightbox({...options});Example method use:
lightbox.nextSlide(); // Go to next slide
lightbox.close(); // Close de lightbox| Option | Parameters | Description |
|---|---|---|
| open | node |
Open the lightbox, you can optionally pass a node. |
| close | - |
Close the lightbox. |
| reload | - |
Reload the lightbox, after inserting content with ajax. |
| destroy | - |
Destroy and remove all attached events. |
| prevSlide | - |
Go to the previous slide. |
| nextSlide | - |
Go to the next slide. |
| goToSlide | number |
Index of the slide. |
| getActiveSlide | - |
Get active slide. It will return the active node. |
| getActiveSlideIndex | - |
Get active slide. It will return the active slide index. |
| playSlideVideo | number |
Play video in the specified slide. |
| stopSlideVideo | number |
Stop video in the specified slide. |
| setElements | {} |
Update the lightbox gallery elements. |
// Example set custom gallery items
lightbox.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,
}
]);
// Open the lightbox
lightbox.open();$ npm install $ npm run watch