biati-digital / glightbox

Pure Javascript lightbox with mobile support. It can handle images, videos with autoplay, inline content and iframes

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('open', () => {
  // Do something
});

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

Event Type	Description
open	Provide a function when the lightbox is opened.
close	Provide a function when the lightbox is closed.
slide_before_change	Trigger a function before the slide is changed.
slide_changed	Trigger a function after the slide is changed.
slide_before_load	Trigger a function before a slide is loaded for the first time, the function will only be called once
slide_after_load	Trigger a function after a slide is loaded and it's content is set for the first time, the function will only be called once
slide_inserted	Trigger a function after a slide is inserted using insertSlide.
slide_removed	Trigger a function after a slide is removed`

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 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
});

// Useful to execute scripts that depends
// on the slide to be ready with all it's content
// and already has a height
// data will contain all the info about the slide
lightbox.on('slide_after_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 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
});

// Trigger a function when a slide is inserted
lightbox.on('slide_inserted', (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 - null
});

// Trigger a function when a slide is removed
lightbox.on('slide_removed', (index) => {
  // index is the position of the element in the gallery
});

Video player

GLightbox includes "Plyr" the best player out there, you can pass any Plyr option to the player, view all available options here Plyr options. GLightbox will only inject the player library if required and only when the lightbox is opened.

Internet Explorer 11. If you need support for this browser you need to set the js url to use the polyfilled version. This is not the default because IE11 is ancient and we need to let it die.

Autoplay for mobile/tablet

Please note, autoplay is blocked in some browsers, there’s nothing we can do to change that unfortunately, the browser will decide if your video can be autoplayed. Please do not post issues about this, instead inform yourself about this topic:

• https://webkit.org/blog/6784/new-video-policies-for-ios/
• https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
• https://hacks.mozilla.org/2019/02/firefox-66-to-block-automatically-playing-audible-video-and-audio/

they decide if a video can be autoplayed based in a few rules

plyr: {
    js: 'https://cdn.plyr.io/3.6.2/plyr.polyfilled.js',
    ....

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: {
      ratio: '16:9', // or '4:3'
      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
      }
    }
  }
});

API

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 });

Methods

Example method use:

lightbox.nextSlide(); // Go to next slide
lightbox.close(); // Close the lightbox

Option	Parameters	Description
open	node	Open the lightbox, you can optionally pass a node.
openAt	number	Open at specific index.
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.
insertSlide	object, index	Insert a slide at the specified index.
removeSlide	index	Remove slide at the specified index.
getActiveSlide	-	Get active slide. It will return the active node.
getActiveSlideIndex	-	Get active slide. It will return the active slide index.
slidePlayerPlay	number	Play video in the specified slide.
slidePlayerPause	number	Pause video in the specified slide.
getSlidePlayerInstance	node, index	Get the player instance of the specified slide.
getAllPlayers	-	Get all players instance.
setElements	[]	Update the lightbox gallery elements.
on	string, function	Set an event listener. See Events section
once	string, function	Set an event listener that will be triggered only once. See Events section

// Example set custom gallery items
// This overwrites all the items in the gallery
lightbox.setElements([
  {
    'href': 'https://picsum.photos/1200/800',
    'type': 'image' // Type is only required if GLightbox fails to know what kind of content should display
  },
  {
    'href': 'https://www.youtube.com/watch?v=Ga6RYejo6Hk',
    'type': 'video', // Type is only required if GLightbox fails to know what kind of content should display
    'width': '900px',
  },
  {
    'content': '<p>some html to append in the slide</p>',
    'width': '900px',
  }
]);


// Insert a single slide at the end of all the items,
lightbox.insertSlide({
    href: 'video url...',
    width: '90vw'
});

// Insert a single slide at index 2 or pass 0 to add it at the start
lightbox.insertSlide({
    href: 'video url...',
    width: '90vw'
}, 2);

// You can insert a slide with a defined html
lightbox.insertSlide({
    content: '<p>some html to append in the slide</p>',
    width: '90vw'
}, 2);

// Or if you prefer you can pass a node
// and it will be inserted in the slide
lightbox.insertSlide({
    content: document.getElementById('inline-example'),
    width: '90vw'
}, 2);

// Remove the slide at index 2
lightbox.removeSlide(2);

// Open the lightbox
lightbox.open();

// You can also open the lightbox at a specific index
lightbox.openAt(2);

// So imagine that you are making an ajax request that returns some html
// You can create an empty instance and append the content once is returned

const ajaxExample = GLightbox({ selector: null }); // or you can set the selector empty selector: ''

doAjaxCall({...}).then(response => {
    ajaxExample.insertSlide({
        width: '500px',
        content: response.html
    });
    ajaxExample.open();
})

// Or you could use the set elements method to empty all the slides if any

doAjaxCall({...}).then(response => {
    ajaxExample.setElements([
      {
        content: response.html
      }
    ]);
    ajaxExample.open();
})

Animations

Animations are created with CSS, each effect has an in and out value and they are used to attach the correct classes to the node.

For example if you are using

const glightbox = GLightbox({
  openEffect: 'zoom',
  closeEffect: 'fade',
  cssEfects: {
    // This are some of the animations included, no need to overwrite
    fade: { in: 'fadeIn', out: 'fadeOut' },
    zoom: { in: 'zoomIn', out: 'zoomOut' }
  }
});

The open effect will use cssEfects.zoom.in and will add the class gzoomIn, if you take a look at the CSS you'll see:

.gzoomIn {
    animation: gzoomIn .5s ease;
}

@keyframes gzoomIn {
    from {
        opacity: 0;
        transform: scale3d(.3, .3, .3);
    }
    to {
        opacity: 1;
    }
}

Adding a custom animation

You can create any animation you want, you can find some inspiration in the Animate.css library, for example you can add the bounce animation like this:

const glightbox = GLightbox({
  openEffect: 'bounce', // Define that we want the bounce animation on open
  cssEfects: {
    // register our new animation
    bounce: { in: 'bounceIn', out: 'bounceOut' }
  }
});

/*A g will be appended to the animation name so bounceIn will become gbounceIn */
.gbounceIn {
  animation: bounceIn 1.3s ease;
}

@keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }

  20% {
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity: 1;
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    transform: scale3d(0.97, 0.97, 0.97);
  }

  to {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

Themeable

You can completely customize the structure of GLightbox and use CSS to change any part you want.

const customLightboxHTML = `<div id="glightbox-body" class="glightbox-container">
    <div class="gloader visible"></div>
    <div class="goverlay"></div>
    <div class="gcontainer">
    <div id="glightbox-slider" class="gslider"></div>
    <button class="gnext gbtn" tabindex="0" aria-label="Next" data-customattribute="example">{nextSVG}</button>
    <button class="gprev gbtn" tabindex="1" aria-label="Previous">{prevSVG}</button>
    <button class="gclose gbtn" tabindex="2" aria-label="Close">{closeSVG}</button>
</div>
</div>`;

let customSlideHTML = `<div class="gslide">
    <div class="gslide-inner-content">
        <div class="ginner-container">
            <div class="gslide-media">
            </div>
            <div class="gslide-description">
                <div class="gdesc-inner">
                    <h4 class="gslide-title"></h4>
                    <div class="gslide-desc"></div>
                </div>
            </div>
        </div>
    </div>
</div>`;

const glightbox = GLightbox({
  lightboxHTML: customLightboxHTML,
  slideHTML: customSlideHTML,
  skin: 'supercool'
});

You can also define a skin name and the lightbox will append the class name "glightbox-supercool" so you can customize it with CSS, this will leave a barebones structure so you can change the buttons appearance, etc.

Development

$ npm install
$ npm run watch

Browser Support

GLightbox was tested in the following browsers.

• Safari
• Mobile Safari
• Opera
• Edge
• Firefox
• Internet Explorer 11

It will work in any browser that supports CSS Flexbox

Contributing

Feel free to report any issues! If you wish to contribute by fixing a bug or implementing a new feature, please first read the CONTRIBUTING guide.

Donate

If you find this code useful, please consider a donation to keep this project growing, any amount is appreciated.

Support

We only provide support for bugs and feature requests, so please only post issues about this two topics, if you need help implementing GLightbox or you are just starting with HTML/CSS/Javascript please use stackoverlow, you'll be able to find more help there. This will help us to keep the issues related to the library and solve issues faster.

Changelog

Latest version vundefined

See the CHANGELOG.md file for details

License

This project is licensed under the MIT License - see the LICENSE.md file for details

glightbox's Issues

sourcetype wrong. Can we manually set sourcetype?

It seems that the sourcetype is incorrectly applied when using certain URLs. For example when using images from unsplash.it, which look like this: https://unsplash.it/1200/800 it thinks it's an iframe when in fact, it's an image.

It would be great if there was a way to set the sourcetype manually, rather than have the plugin guess, as it's not fully reliable.

perhaps an option of type: 'image' | 'iframe' | 'video' | 'inline'

Add method for open custom popup

like fancybox $.fancybox.open({})

or i blind and this method are realized?

and be very cool if i can call popup manually gallery.open() or else

Scrollbar always showed on mobile devices

Hi guys,

In iOS 11, when the lightbox opened then the scrollbar always is shown on mobile devices.

fade openEffect and closeEffect don't work

Testing out the fade openEffect (don't really like zoom) but it only seems to fade the modal background and not the image itself.
Changing closeEffect doesn't seem to have any effect, it will always zoom out.

Personally I might prefer no effect at all, just hard show/hide. Maybe a suggestion for next update?

Uncaught TypeError: Cannot read property 'offsetWidth' of null

When importing GLightbox as an ES6 module (e.g. import GLightbox from 'glightbox';) it spits out this error when clicking a link that matches the selector:

(No special config is used, only the selector option is passed into the GLightbox function)

Problem has to do with body not being available inside the GlightboxInit class.

Request: determine length of gallery by unique slides not triggers

My use case: building an event calendar and using glightbox to show event details (from a hidden in-page element) when events are clicked.

In this case, there are repeating events where each instance on the calendar points to the same details. But since glightbox controls the length of a gallery by how many triggers it has, what I get is a slideshow that contains the same details container X times (one for each event repeat). What I would love is if glightbox identified duplicate slides and only instantiated one copy, letting all triggers that point to it open the slideshow at that point.

descPosition not working when called as javascript option

This doesn't seem to do anything:

var myLightbox = GLightbox({
    'descPosition': 'right',

However this does work:

data-glightbox="descPosition:right"

Prev/Next image by MOUSE dragging (touch work perfect!)

Autoplay issue: Youtube

Hi,

I am experiencing an autoplay issue on youtube embeds (desktop).

When first opening the lightbox the youtube video will not autoplay, if you close the lightbox and then re-open it the video will now autoplay.

This happens both in my code and on your example website (the issue doesn't effect the Vimeo or JW player options).

Any idea of the cause?

Thanks

publish on npm

would be great if this package could be pushed to npm so we can install it easier.

image stretched out

Because you scale images with max-width and max-height large images that don't fit the viewport are scaled only vertically or horizontally so the image stretches out and they look malformed. Maybe add some javascript to fix aspect ratio? Or a simple solution would also be to show the image as a background of the container using background-size:contain

The video does not work in mobile devices

I was trying to use your library but when I load the page in my iPhone 7, the videos is not being showed, the screen rest in black.

I thoungt there was a problem with my devise so I did the same in Firefox with the same result. After try it out in the page I'm actually developing I also did it with your demo. And the problem remains

Turn off moreText a tag

Is there a way to disable to desc-more link so it shows the full description while in mobile? I want it to show the full description without having to click the see more link.

The description contains the <A> tag

HTML:
<li class="box visible"> <a href="demo/img/large/gm7.jpg" class="glightbox2" data-glightbox="title:Description Bottom; description: You can set the position of the desciption; descPosition: right;"> <img src="demo/img/small/gm7.jpg" alt="image"> </a> </li><div class="glightbox-desc"> <p>You can set the position of the desciption in different ways for example top, bottom, left or right</p> <p>Duis quis ipsum vehicula eros ultrices lacinia. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae Duis quis ipsum vehicula eros ultrices lacinia. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere</p> </div>
JS (541. row):
var nodeDesc = element.parentNode.querySelector('.glightbox-desc');

Responsive video

I would like videos to be able to scale with the window size. Respecting aspect ratio.
By default it's set to 900 x 506 but if your window is smaller then that it gets awkward.
When it doesn't fit width then the video gets smaller but with a black background. When it doesn't fit height the video gets cropped at the bottom.

Besides that, I think 960 x 540 is a better default video size as 506 is actually a rounded number so not perfect 16:9 ratio. Although personally I set is to 1280 x 720 anyway.

Touch not working on ios

Describe the bug
No swipe (touch) functionality to switch between pictures.
Tested on Iphone X, XS, Ipad Pro 2018.

Are you able to reproduce the bug in the demo site
Yes

To Reproduce
Steps to reproduce the behavior:

1. Open demo page
2. Open picture
3. Try to swipe to get to the next / previous picture

Expected behavior
Swiping left/right would load the previous or next picture

Smartphone:

• Device: iPhoneX / XS / ipad Pro
• OS: iOS12.1.4
• Browser Stock Safari.+ Firefox

Demo: Open block does not scroll.

Describe the bug
Demo "Images with Description".
Open block does not scroll.

Are you able to reproduce the bug in the demo site
Yes

To Reproduce
Steps to reproduce the behavior:

1. Go to https://mcstudios.github.io/glightbox/#examples Images with Description
2. Click on First image

Expected behavior
Scroll open block with offset image and text.

Screenshots
https://yadi.sk/i/ZnYiNUkCE2XNHg

Desktop:

• Device: Notebook 15" 1366x768
• OS: Ubuntu 18.04
• Browser Firefox 66

Where are the cdn hosted files

Hi
please can the files be hosted on a cdn
i suggest cdnjs and jsdelivr
thanks

Use svg instead of png for closing button

Hey!
Instead of the background png on .glightbox-clean .gclose, .glightbox-clean .gnext, .glightbox-clean .gprev you could use a svg.
Example:

<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 320 512">
  <path d="M193.94 256L296.5 153.44l21.15-21.15c3.12-3.12 3.12-8.19 0-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31 0L160 222.06 36.29 98.34c-3.12-3.12-8.19-3.12-11.31 0L2.34 120.97c-3.12 3.12-3.12 8.19 0 11.31L126.06 256 2.34 379.71c-3.12 3.12-3.12 8.19 0 11.31l22.63 22.63c3.12 3.12 8.19 3.12 11.31 0L160 289.94 262.56 392.5l21.15 21.15c3.12 3.12 8.19 3.12 11.31 0l22.63-22.63c3.12-3.12 3.12-8.19 0-11.31L193.94 256z"/>
</svg>

(You have to adjust the size on the viewBox)
Want to use it as a background-image? No problem!
https://websemantics.uk/tools/svg-to-background-image-conversion/

Great lightbox, never have seen a better one before, especially with vanilla JS, keep up the good work!

Lightbox doesn't work in IE11 once minified

In IE11 the following error is thrown on a production/minified build:

multiple definitions of a property not allowed in strict mode.

I forked the package and deleted the 'use strict' line so it will work for now but I think we need a proper solution :).

Autoplay is not working (Youtube, Vimeo)

I am invoking plugin with this code.

var lightboxDescription = GLightbox({
selector: 'fancybox-media',
autoplayVideos: true
});

Tested in chrome. https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

Maximum call stack size exceeded

So I love this library, first off.
It was working fine through out the website I'm building but now, out of nowhere, it's saying that the maximum call stack size is being exceeded.

Step 1
open lightbox with images and videos.
Step 2
Move to video
Step 3
Video won't load
Step 4
Move to slide before video and back again, video loads fine.

I have another gallery on the page that has videos on it too. But I'm assuming since its a different instance of GLightbox that it shouldn't be causing any issues.

This is my code for the lightbox I'm having an error with.

const youtubeObj = {
    api: "https://www.youtube.com/iframe_api",
    params: {
        enablejsapi: 1, //use jsApi
        showinfo:1, //Show info about the video
        rel:0 //Show related videos from youtube or from channel (0 equals channel, 1 equals youtube)
    }
}

$(document).ready(function() {

    const lightbox = GLightbox({
        youtube: youtubeObj
    });

});

Let me know if you need any other information to help with this

Close Button can't be disabled

While there's a setting for it, it seems not to be taken into account when disabled.

var myLightbox = GLightbox({
  'selector': 'lightbox',
  closeButton: false,
}); 

Still shows the closeButton. I checked the code and it does only seem to attach an event to it, or not, based on that setting. Am I wrong?

prevent page from jumping top when glightbox opens

Hello,

I got one minor issue that makes the page jumps top when the lightbox opens up. I've tried few things like adding e.preventDefault(); when clicking on the lightbox ClassName but it doesn't seems to do the trick.

Any idea where this issue could come from ?

Many thanks

images with too high or too wide

if image is too high or too wide，it can't see the whole image. dragging image is not usefull to see the whole image. could you consider this question?
thank you

Tag <a> doesn't display on description section

Hello! It's an actually cool plugin. But today I see some problem. When I try tag at the description section it doesn't display. Moreover, the tag

with description doesn't display too. Please help me to fix this issue.

Close lightbox by clicking anywhere off of the image

We want to be able to close the lightbox by clicking anywhere off of the image instead of just clicking the close button. Is there an option for that or would I have to add some custom js?

lightbox.destroy() throws error

This can be reproduced by running lightbox.destroy() in the console on the demo page. Like in my case, the slides do not contain any video.

When calling destroy() the following error is thrown:

glightbox.js:1602 Uncaught TypeError: Cannot read property 'querySelector' of null
    at GlightboxInit.stopSlideVideo (glightbox.js:1602)
    at GlightboxInit.close (glightbox.js:1772)
    at GlightboxInit.destroy (glightbox.js:1803)
    at t.beforeDestroy (master.min.js:1)
    at swiper.min.js:12
    at Array.forEach (<anonymous>)
    at swiper.min.js:12
    at Array.forEach (<anonymous>)
    at t.p.emit (swiper.min.js:12)
    at t.destroy (swiper.min.js:12)

Line numbers are from v1.0.4 release zip and differ a bit on master.

Self Hosted Videos do not load

Describe the bug
I am trying to load a video that we are hosting ourselves,but when I click on the button to pull up the lightbox nothing loads. I double checked that everything else was loading properly (the source on the video is correct, the styles seem accurate...)

Are you able to reproduce the bug in the demo site
Yes

To Reproduce
Steps to reproduce the behavior:

1. Go to video examples and inline examples
2. Click on either the JWPlayer example or the video example in inline elements
3. Video should not load.

Expected behavior
I expected the video to work like the youtube video does. It would load and then automatically start playing.

Screenshots
Nothing applicable other than a black screen. I can post them if necessary.

Desktop:

• Device: Apple iMac
• OS: macOS Mojave
• Browser Chrome 75.0.3770.142 and Firefox 68.0
• Version Most Recent

Feature for zooming images?

By dblclick or click some icon.

Uncaught ReferenceError: body is not defined

The removal of the body variable in b9daaf3 might be causing some issues with touch navigation? I get this error when I attempt to swipe in Chrome device emulation:

glightbox.js:1180 Uncaught ReferenceError: body is not defined
    at withCallback (glightbox.js:1180)
    at HTMLDocument.handler (glightbox.js:327)

Setting var body = document.body in the touchNavigation() function solves the problem.

Lightbox won't fit screen with description

See this example: https://peterblokland.nl/gallery and click the first image. The description won't fit the screen because the image is too large. Your own demo site has this issue too, make your browser window smaller and open the image with the man with the hat which has a bottom description. With description left or right it works fine.

Edit: Since my example was a live site I disabled descriptions for now (I don't like left/right) but this is what your demo site looks like on smaller screens, description is falling off because image isn't resized properly:

How to set responsive width and height

The light box option for width and height is set to 900 and 506
Is they a way to make it responsive by default.
I don't like the scrollbars showing up with larger images or
the extra canvas when the image is smaller.

Regex on src for images

I was playing with glightbox yesterday and discovered that if the src of your image has any params it will end up in an iframe and treated as a video.

Looking at the code it looks like the regex check is just checking the end of a string for '.jpg' or '.jpeg' etc....

For my current project i am using urls that have params such as 'https://somesite/somefile.jpg?mtime=023473663', in these cases the script does not recognise as an image. I got around this by using a regex in my template to remove the 'mtime' param which probably is not ideal.

[FR] ability to set rel="" to have seperate galleries on one page

It would be awesome to have the ability to some how group a bunch of gallery items together so you can have multiple galleries on one page.

Similar to how fancybox does (use to do?) it e.g. rel="my-gallery-1".

Can't use : or ; sign in description text

How can I get something like this to work?

data-glightbox="title:Test; description: size: M<br>price: 100"

Can't use : or ; sign in description text since it's also used to split the options.
One suggestion would be to make : work or :: is replaced with a single : or something.

Actually I think it would be better to give each option it's own data property? For example
data-glightbox-title="Title" data-glightbox-description="size: M<br>price: 100"

Setting title/description programmatically

Hi! I am very interested in your library. however, I was wondering if there's a way to set the title and description programmatically across all of the images?

I attempted to set the href to different things, but none of which worked successfully.

any way I can make it work properly through setElements or another workaround?

If image has no extension not reconized as image

When i paste in an image in the href without an image extension, like this for example: https://picsum.photos/1200/700/?image=40
The lightbox will be opened as a iFrame and i get (except for Chrome) unexpected styling results.

<div class="gslide-media gslide-external"><iframe class="vimeo-video gvideo iframe-ready" src="http://unsplash.it/800/600?random" style="height: 506px; width: 900px;" allowfullscreen=""></iframe></div>

If i put in an image with an extension, like this for example: https://media.architecturaldigest.com/photos/59b04f5ddd88d32f9bd9c633/master/pass/AJN_HW_Abu_Dhabi_Louvre_04%20%C2%A9%20TDIC,%20Architect%20Ateliers%20Jean%20Nouvel.jpg

It works great in all browsers and the lightbox is not in a iFrame.

<div class="gslide-media gslide-image"><img src="https://media.architecturaldigest.com/photos/59b04f5ddd88d32f9bd9c633/master/pass/AJN_HW_Abu_Dhabi_Louvre_04%20%C2%A9%20TDIC,%20Architect%20Ateliers%20Jean%20Nouvel.jpg"></div>

npm isn't updated

Just dit a npm install glightbox and I noticed it's still version 1.0.6 and not the expected 1.0.7

Tabbing index accessibility issue

Describe the bug
Keyboard tabbing is lost and nearly impossible to make out when the lightbox is opened.

Are you able to reproduce the bug in the demo site
Yes.

To Reproduce
Steps to reproduce the behavior:

1. Click on an image to open the lightbox.
2. Attempt to tab through the page.
3. Observe that you can't see the current tabbed item and it takes forever to tab to the close button or next button.

Expected behavior
When the lightbox is open, you should only be able to tab between the prev/next buttons and the close button.

One suggestion would be to simply anchor the currently open lightbox so the tabbing at least begins at the previous button (or next button if no prev button), however it would be nice to only be able to tab within the contents of the lightbox itself.

Devices/Browsers:
All

popup has margins on right side and bottom

Basically, there is a margin on the right side and the bottom of the image in the popup..
Any ideas on this?

Im using this script with instafeed script to get instagram images

Edit:
I see now that the script is opening the popup as a video popup for some reason, any ideas why?
I say this because its opening an iframe with the class "vimeo-video gvideo iframe-ready", so im assuming its opening the image as a video

rebind after ajax?

Hi, I have dynamic content via ajax. How can I rebind glightbox? Thank you

iframe not centered

Describe the bug
iframe not centered but left aligned in a 100% width white window in 2.0 version. Used to work fine in older versions

Are you able to reproduce the bug in the demo site
Yes

To Reproduce
Steps to reproduce the behavior:

1. Go to https://mcstudios.github.io/glightbox/ section IFRAMES AND INLINE ELEMENTS
2. Click on the middle image (grass) that opens the google maps iframe
3. It's left aligned and with lots of whitespace on the right.

Expected behavior
Should be centered

Screenshots

Desktop:

• OS: MacOS Mojave
• In Chrome and Safari

Api problem

var myLightbox = GLightbox();

No method works, variable myLightbox is undefined

Embed youtube video's from 'www.youtube-nocookie.com'

A client of mine requires youtube embeds to be requested from 'www.youtube-nocookie.com/......' instead of 'www.youtube.com/.......'.

With the current options it's not possible to do this. I can't find a way (in the youtube dev docs) to do this by adding a parameter. It looks to me like this is not possible.
Can this possibly be included in the options?

Maybe something like this:

const youtubeUrl = this.settings.youtube.nocookie ? 'www.youtube-nocookie.com' : 'www.youtube.com';
const videoUrl = '${protocol}://${youtubeUrl}/embed/${youtubeID}?${yparams}';

I'd love to here from you if this if something that can be included.

Should add option to force image from cdn

Some cdn eg. uploadcare has images in url without extension e.g. https://ucarecdn.com/90964191-dfa2-4a22-8118-8a9e460fff9b/

This then causes the image to appear in iframe as this condition fails:

if (url.match(/\.(jpeg|jpg|gif|png)$/) !== null)

I added a temporal solution for my project

if (url.match(/\.(jpeg|jpg|gif|png)$/) !== null || url.match(/ucarecdn.com/))

Would be nice to implement force option to show images without extension needed

Duplicate ids in div lightbox

I have a form inside a div which is then displayed using the lightbox. When opened glightbox duplicates the div to show the content. This causes issues with ids, since they also get duplicated and aren't unique anymore.

For example label elements using the for-attribute stop working as well as assigned event-listeners.

Maybe moving the div instead of duplicating it could solve this.

Cheers,
Victor

npm package too big for jsDelivr

I'm trying to load this package from jsDelivr CDN but it fails because the package is over 50 MB. Are there any files that could be removed to reduce the package size?

Scrolling to top of browser.

When clicking an item in my gallery the browser moving to the top of the browser. Is there a way to prevent this? I see the demo site does not show this behaviour so it is something I am doing wrong!

I tried adding a preventDefault on the anchor containing the gallery image!

image can't show by initialized more times

when I initialized GLightbox twice or more，images would not show any more. Because I use ajax to refresh or page load the webview, so GLightbox may be initialized more times. It may be that I use it incorrectly.
:(