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="dist/css/glightbox.css" />
<script src="dist/js/glightbox.min.js"></script>

<!-- USING A 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>

<!-- USING ES MODULES -->

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

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

Examples

<!-- 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 description">
  <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>

<!-- URL with no extension -->
<a href="https://picsum.photos/1200/800" data-glightbox="type: image">
  <img src="small.jpg" alt="image" />
</a>
<!-- OR using multiple data attributes -->
<a href="https://picsum.photos/1200/800" data-type="image">
  <img src="small.jpg" alt="image" />
</a>

<!-- Using responsive images: specify sizes and srcset through data attributes in the
     same way you would with the img tag.
     See: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images -->
<a href="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="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

<!-- One line config -->
<a href="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>

<!-- Multiple data attributes / You can use the options as separated data attributes -->
<a
  href="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': '<p>This will append some html inside the slide</p>' // 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([...]);

| Option | Type | Default | Description | | --- | --- | --- | --- | | selector | string | .glightbox | Name of the selector for example '.glightbox' or 'data-glightbox' or '*[data-glightbox]' | | 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 | zoom | Name of the effect on lightbox open. (zoom, fade, none) | | closeEffect | string | zoom | 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). | | touchFollowAxis | boolean | true | Image follow axis when dragging on mobile. | | 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 | 900px | Default width for inline elements and iframes, you can define a specific size on each slide. You can use any unit for example 90% or 100vw for full width | | height | number | 506px | Default height for inline elements and iframes, you can define a specific size on each slide.You can use any unit for example 90% or 100vh For inline elements you can set the height to auto. | | videosWidth | number | 960px | Default width for videos. Videos are responsive so height is not required. The width can be in px % or even vw for example, 500px, 90% or 100vw for full width videos | | descPosition | string | bottom | Global position for slides description, you can define a specific position on each slide (bottom, top, left, right). | | loop | boolean | false | Loop slides on end. | | zoomable | boolean | true | Enable or disable zoomable images you can also use data-zoomable="false" on individual nodes. | | draggable | boolean | true | Enable or disable mouse drag to go prev and next slide (only images and inline content), you can also use data-draggable="false" on individual nodes. | | dragToleranceX | number | 40 | Used with draggable. Number of pixels the user has to drag to go to prev or next slide. | | dragToleranceY | number | 65 | Used with draggable. Number of pixels the user has to drag up or down to close the lightbox (Set 0 to disable vertical drag). | | dragAutoSnap | boolean | false | If true the slide will automatically change to prev/next or close if dragToleranceX or dragToleranceY is reached, otherwise it will wait till the mouse is released. | | preload | boolean | true | Enable or disable preloading. | | svg | object | {} | Set your own svg icons. | | cssEfects | object | 'See animations' | Define or adjust lightbox animations. See the Animations section in the README. | | lightboxHTML | string | 'See themes' | You can completely change the html of GLightbox. See the Themeable section in the README. | | slideHTML | string | 'See themes' | You can completely change the html of the individual slide. See the Themeable section in the README. | | autoplayVideos | boolean | true | Autoplay videos on open. | | autofocusVideos | boolean | false | If true video will be focused on play to allow keyboard sortcuts for the player, this will deactivate prev and next arrows to change slide so use it only if you know what you are doing. | | plyr | object | {} | View video player options. |

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

Glightbox

Install / Use

README