GLightbox

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.

Features

• Small - only 11KB Gzipped
• Fast and Responsive - works with any screen size
• Gallery Support - Create multiple galleries
• Responsive Images Support - Let the browser use the optimal image for the current screen resolution
• 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
• Themeable - create your skin or modify the animations with some minor css changes

Live Demo

You can check the live demo right here

Usage

$ npm install glightbox
# OR
$ yarn add glightbox
# OR
$ bower install glightbox

// Using ESM specification
import '/path/to/glightbox.js';

// Using a bundler like webpack
import GLightbox from 'glightbox';

Or manually download and link glightbox.min.js in your HTML:

<link rel="stylesheet" href="https://github.com/biati-digital/glightbox/raw/v3.3.1/dist/css/glightbox.css" />
<script src="https://github.com/biati-digital/glightbox/raw/v3.3.1/dist/js/glightbox.min.js"></script>



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



<script type="module">
  import 'https://cdn.jsdelivr.net/gh/mcstudios/glightbox/dist/js/glightbox.min.js';

  const lightbox = GLightbox({ ...options });
</script>

Examples

<a href="https://github.com/biati-digital/glightbox/raw/v3.3.1/large.jpg" class="glightbox">
  <img src="https://github.com/biati-digital/glightbox/raw/v3.3.1/small.jpg" alt="image" />
</a>


<a href="https://vimeo.com/115041822" class="glightbox2">
  <img src="https://github.com/biati-digital/glightbox/raw/v3.3.1/small.jpg" alt="image" />
</a>


<a href="https://github.com/biati-digital/glightbox/raw/v3.3.1/large.jpg" class="glightbox3" data-gallery="gallery1">
  <img src="https://github.com/biati-digital/glightbox/raw/v3.3.1/small.jpg" alt="image" />
</a>
<a href="https://github.com/biati-digital/glightbox/raw/v3.3.1/video.mp4" class="glightbox3" data-gallery="gallery1">
  <img src="https://github.com/biati-digital/glightbox/raw/v3.3.1/small.jpg" alt="image" />
</a>


<a href="https://github.com/biati-digital/glightbox/raw/v3.3.1/large.jpg" class="glightbox4" data-glightbox="title: My title; description: this is the slide description">
  <img src="https://github.com/biati-digital/glightbox/raw/v3.3.1/small.jpg" alt="image" />
</a>


<a href="https://github.com/biati-digital/glightbox/raw/v3.3.1/large.jpg" class="glightbox5" data-glightbox="title: My title; description: .custom-desc1">
  <img src="https://github.com/biati-digital/glightbox/raw/v3.3.1/small.jpg" alt="image" />
</a>






The content of this div will be used as the slide description




You can add links and any HTML you want







<a href="https://picsum.photos/1200/800" data-glightbox="type: image">
  <img src="https://github.com/biati-digital/glightbox/raw/v3.3.1/small.jpg" alt="image" />
</a>

<a href="https://picsum.photos/1200/800" data-type="image">
  <img src="https://github.com/biati-digital/glightbox/raw/v3.3.1/small.jpg" alt="image" />
</a>


<a href="https://github.com/biati-digital/glightbox/raw/v3.3.1/default.jpg" class="glightbox6" data-title="Responsive example"
data-description="Your browser will choose the optimal image for the resolution"
data-sizes="(max-width: 600px) 480px, 800px"
data-srcset="img480.jpg 480w, img800.jpg 800w">
  <img src="https://github.com/biati-digital/glightbox/raw/v3.3.1/small.jpg" alt="image" />
</a>

Slide Options

You can specify some options to each individual slide, the available options are:

• title
• alt
• description
• descPosition
• type
• effect
• width
• height
• zoomable
• draggable

<a href="https://github.com/biati-digital/glightbox/raw/v3.3.1/large.jpg" data-glightbox="title: Your title; description: description here; descPosition: left; type: image; effect: fade; width: 900px; height: auto; zoomable: true; draggable: true;"></a>


<a
  href="https://github.com/biati-digital/glightbox/raw/v3.3.1/large.jpg"
  data-title="My title"
  data-description="description here"
  data-desc-position="right"
  data-type="image"
  data-effect="fade"
  data-width="900px"
  data-height="auto"
  data-zoomable="true"
  data-draggable="true"
></a>

Lightbox Options

Example use of the options.

const lightbox = GLightbox({
    touchNavigation: true,
    loop: true,
    autoplayVideos: true
});

// 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',
            'alt': 'image text alternatives'
        },
        {
            'href': 'https://www.youtube.com/watch?v=Ga6RYejo6Hk',
            'type': 'video',
            'source': 'youtube', //vimeo, youtube or local
            'width': 900,
        },
        {
            'content': '

This will append some html inside the slide

' // read more in the API section
        },
        {
            'content': document.getElementById('inline-example') // this will append a node inside the slide
        },
    ],
    autoplayVideos: true,
});
myGallery.open();

// If later you need to modify the elements you can use setElements
myGallery.setElements([...]);

Events

You can listen for events using your GLightbox instance (see example under the table). You can use the on() API method or once().

const lightbox = GLightbox();
lightbox.on('open', () => {
  // Do something
});

lightbox.once('slide_changed', () => {
  // Do something just one time
});

```javascript const lightbox = GLightbox(); lightbox.on('slide_before_change', ({ prev, current }) => { console.log('Prev slide', prev); console.log('Current slide', current);

// Prev and current are objects that contain the following data const { slideIndex, slideNode, slideConfig, player, trigger } = current;

// slideIndex - the slide index // slideNode - the node you can modify // slideConfig - will contain the configuration of the slide like title, description, etc. // player - the slide player if it exists otherwise will return false // trigger - this will contain the element that triggers this slide, this can be a link, a button, etc in your HTML, it can be null if the elements in the gallery were set dinamically });

lightbox.on('slide_changed', ({ prev, current }) => { console.log('Prev slide', prev); console.log('Current slide', current);

// Prev and current are objects that contain the following data const { slideIndex, slideNode, slideConfig, player, trigger } = current;

// slideIndex - the slide index // slideNode - the node you can modify // slideConfig - will contain the configuration of the slide like title, description, etc. // player - the slide player if it exists otherwise will return false // trigger - this will contain the element that triggers this slide, this can be a link, a button, etc in your HTML, it can be null if the elements in the gallery were set dinamically

if (player) { if (!player.ready) { // If player is not ready player.on('ready', (event) => { // Do something when video is ready }); }

player.on('play', (event) => {
  console.log('Started play');
});

player.on('volumechange', (event) => {
  console.log('Volume change');
});

player.on('ended', (event) => {
  console.log('Video ended');
});

} });

// Useful to modify the slide // before it's content is added lightbox.on('slide_before_load', (data) => { // data is an object that contain the following const { slideIndex, slideNode, slideConfig, player, trigger } = data;

// slideIndex - the slide index // slideNode - the node you can modify // slideConfig - will contain the configuration of the slide like title, description, etc. // player - the slide player if it exists otherwise will return false // trigger - this w