# Do you have a favorite vanilla JavaScript lightbox?

**URL:** https://forum.bootstrapstudio.io/t/do-you-have-a-favorite-vanilla-javascript-lightbox/10218
**Category:** General
**Created:** [April 28, 2023, 3:56am UTC](https://forum.bootstrapstudio.io/t/do-you-have-a-favorite-vanilla-javascript-lightbox/10218 "2023-04-28T03:56:45Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![printninja](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/printninja/32/481_2.png) [@printninja](https://forum.bootstrapstudio.io/u/printninja)
#### Post date: [April 28, 2023, 3:56am UTC](https://forum.bootstrapstudio.io/t/do-you-have-a-favorite-vanilla-javascript-lightbox/10218/1 "2023-04-28T03:56:45Z")

</div>

Since we’re pretty much moving away from jQuery, I was curious as to whether anyone has found a pure vanilla JS lightbox they really like. Nanogallery2 has been my lightbox of choice, but it does rely on jQuery, so I’m looking to move to something that is pure vanilla JS.

So far I’ve found the following…

> **[lightGallery](https://www.lightgalleryjs.com/)**
>
> A lightweight, modular, JavaScript image and video lightbox gallery plugin. Available for React.js, Vue.js, Angular, and TypeScript.

Feature rich, but technically not free for commercial use

> **[PhotoSwipe](https://photoswipe.com/)**
>
> Open-source JavaScript image gallery and lightbox.

Fewer features than lightgallery, but totally free under the MIT license

> **[Fullscreen Lightbox | Vanilla JavaScript Lightbox Plug-in](https://fslightbox.com/)**
>
> A front-end plug-in for displaying images, videos, or, through custom sources, anything you want in a clean overlying box.

Not bad. The free version is kinda basic. The paid version has a few nice extra features.

> **[Spotlight.js - Modern HTML5 Image Gallery](https://nextapps-de.github.io/spotlight/)**
>
> WinBox is the web's most easy to integrate lightbox gallery library. Super-lightweight, outstanding performance, no dependencies.

Not a bad effort. Free under the Apache license

Any opinions gang?

---

<div class="post-metadata">

### Author: ![kuligaposten](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/kuligaposten/32/1190_2.png) [@kuligaposten](https://forum.bootstrapstudio.io/u/kuligaposten)
#### Post date: [April 28, 2023, 1:11pm UTC](https://forum.bootstrapstudio.io/t/do-you-have-a-favorite-vanilla-javascript-lightbox/10218/2 "2023-04-28T13:11:10Z")

</div>

Here is one for Bootstrap 5

> **[Lightbox for Bootstrap 5](https://trvswgnr.github.io/bs5-lightbox/)**
>
> A pure JS lightbox gallery plugin for Bootstrap 5 based on the Modal and Carousel components

Just another Vanilla JS Lightbox plugin, suitable for Images, Videos, Inline contents, iFrames, Ajax requests.

> **[VenoBox 2 - modal window javascript plugin, touch swipe gallery](https://veno.es/venobox/)**
>
> Responsive Vanilla JS lightbox plugin, suitable for images, videos, iFrames, inline contents

---

<div class="post-metadata">

### Author: ![printninja](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/printninja/32/481_2.png) [@printninja](https://forum.bootstrapstudio.io/u/printninja)
#### Post date: [April 29, 2023, 11:34pm UTC](https://forum.bootstrapstudio.io/t/do-you-have-a-favorite-vanilla-javascript-lightbox/10218/3 "2023-04-29T23:34:48Z")

</div>

I like the one that uses the Bootstrap modal. Should be easy enough to make a component with this to add to the BSS online library.

---

<div class="post-metadata">

### Author: ![kuligaposten](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/kuligaposten/32/1190_2.png) [@kuligaposten](https://forum.bootstrapstudio.io/u/kuligaposten)
#### Post date: [April 30, 2023, 4:20pm UTC](https://forum.bootstrapstudio.io/t/do-you-have-a-favorite-vanilla-javascript-lightbox/10218/4 "2023-04-30T16:20:52Z")

</div>

That shouldn’t be too hard to do, if you go for the default settings you don’t need to write any javascript yourself. We all are looking forward to see what you come up with, with your lightbox component.

---

<div class="post-metadata">

### Author: ![richards](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/richards/32/3163_2.png) [@richards](https://forum.bootstrapstudio.io/u/richards)
#### Post date: [May 3, 2023, 2:20pm UTC](https://forum.bootstrapstudio.io/t/do-you-have-a-favorite-vanilla-javascript-lightbox/10218/5 "2023-05-03T14:20:16Z")

</div>

I’ve been testing glightbox today, impressed so far, nice and easy to set up

[https://biati-digital.github.io/glightbox/](https://biati-digital.github.io/glightbox/)

One thing that I’ve noticed, every lightbox I’ve been testing lately displays horribly on an ipad\*\*. Not sure if that has always been the case, or I’ve just noticed. I must admit I rarely use lightboxes.

\*\*just did a test, on older ipad and it works perfectly 🙂

---

<div class="post-metadata">

### Author: ![malachiman](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/malachiman/32/5185_2.png) [@malachiman](https://forum.bootstrapstudio.io/u/malachiman)
#### Post date: [May 3, 2023, 8:18pm UTC](https://forum.bootstrapstudio.io/t/do-you-have-a-favorite-vanilla-javascript-lightbox/10218/6 "2023-05-03T20:18:12Z")

</div>

That’s really nice. Lite, smooth. I’ll be adding that one to my list.

---

<div class="post-metadata">

### Author: ![printninja](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/printninja/32/481_2.png) [@printninja](https://forum.bootstrapstudio.io/u/printninja)
#### Post date: [May 3, 2023, 10:34pm UTC](https://forum.bootstrapstudio.io/t/do-you-have-a-favorite-vanilla-javascript-lightbox/10218/8 "2023-05-03T22:34:29Z")

</div>

That’s a nice one, too. I like lightboxes that allow you to click and drag images with your mouse. Sometimes the arrows are a pain to click. And I ke how it closes on swipe/drag up or down. It would be nice if this lightbox had variable zoom via the scroll wheel. That’s a nice touch you see in some other lightboxes.

I like that it uses CSS. I’m going to play around with this one.

---

<div class="post-metadata">

### Author: ![jo-r](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/jo-r/32/1926_2.png) [@jo-r](https://forum.bootstrapstudio.io/u/jo-r)
#### Post date: [May 4, 2023, 2:46am UTC](https://forum.bootstrapstudio.io/t/do-you-have-a-favorite-vanilla-javascript-lightbox/10218/9 "2023-05-04T02:46:43Z")

</div>

I use the one in the UI section of BSS, is that not a good one? Works good so far for me and pretty easy to set up. Looks good in iPads too.

---

<div class="post-metadata">

### Author: ![printninja](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/printninja/32/481_2.png) [@printninja](https://forum.bootstrapstudio.io/u/printninja)
#### Post date: [May 4, 2023, 7:26pm UTC](https://forum.bootstrapstudio.io/t/do-you-have-a-favorite-vanilla-javascript-lightbox/10218/10 "2023-05-04T19:26:58Z")

</div>

BSS uses baguetteBox.js

[http://feimosi.github.io/baguetteBox.js/](http://feimosi.github.io/baguetteBox.js/)

> **[GitHub - feimosi/baguetteBox.js: Simple and easy to use lightbox script...](https://github.com/feimosi/baguetteBox.js)**
>
> :zap: Simple and easy to use lightbox script written in pure JavaScript - GitHub - feimosi/baguetteBox.js: Simple and easy to use lightbox script written in pure JavaScript

This lightbox works fine, but it is somewhat feature limited compared to others.

---

<div class="post-metadata">

### Author: ![jo-r](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/jo-r/32/1926_2.png) [@jo-r](https://forum.bootstrapstudio.io/u/jo-r)
#### Post date: [May 4, 2023, 8:21pm UTC](https://forum.bootstrapstudio.io/t/do-you-have-a-favorite-vanilla-javascript-lightbox/10218/11 "2023-05-04T20:21:28Z")

</div>

Yes I agree there, but so far it’s basically what my clients have all wanted so I just turn off all the interactive stuff in the settings in BSS and I change it to Fade in the settings as well and they are happy. I do have to adjust the speed there too sometimes, but it does work very well in all sizes.

---

<div class="post-metadata">

### Author: ![printninja](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/printninja/32/481_2.png) [@printninja](https://forum.bootstrapstudio.io/u/printninja)
#### Post date: [May 4, 2023, 11:21pm UTC](https://forum.bootstrapstudio.io/t/do-you-have-a-favorite-vanilla-javascript-lightbox/10218/12 "2023-05-04T23:21:37Z")

</div>

It sounds like maybe you’re talking about the Bootstrap Carousel Component. The Lightbox Gallery is a third-party JS Component where you have a bunch of ordinary thumbnail photos on the page, and when you click on one, it opens the full-size image in a window where you can then scroll through all the photos. But there are no fade or speed options.

---

<div class="post-metadata">

### Author: ![jo-r](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/jo-r/32/1926_2.png) [@jo-r](https://forum.bootstrapstudio.io/u/jo-r)
#### Post date: [May 5, 2023, 1:09pm UTC](https://forum.bootstrapstudio.io/t/do-you-have-a-favorite-vanilla-javascript-lightbox/10218/13 "2023-05-05T13:09:22Z")

</div>

Oops I did mention the carousel components (got mixed up there sorry lol) but it’s the Lightbox that I was talking about. It’s in the UI section in BSS in the Media components. That’s the one I use unless I need some sorting capabilities.

---

<div class="post-metadata">

### Author: ![printninja](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/printninja/32/481_2.png) [@printninja](https://forum.bootstrapstudio.io/u/printninja)
#### Post date: [May 5, 2023, 5:23pm UTC](https://forum.bootstrapstudio.io/t/do-you-have-a-favorite-vanilla-javascript-lightbox/10218/14 "2023-05-05T17:23:25Z")

</div>

The Lightbox included with BSS is fine for small galleries with a couple of dozen images, but it becomes a bit cumbersome when you want to create a large gallery with 50-100 images. You have to add all the thumbnails and full-sized images in BSS, then insert them one-by-one onto the page, and then link all the full sized images.

When I build a large gallery using something like Nanogallery, I have a pre-made code snippet that contain lines like this…

```auto
<a href="myPic-001.jpg" data-ngthumb="myPic-tb-001.jpg" data-ngdesc="myPic-001"></a>
<a href="myPic-002.jpg" data-ngthumb="myPic-tb-002.jpg" data-ngdesc="myPic-002"></a>
<a href="myPic-003.jpg" data-ngthumb="myPic-tb-003.jpg" data-ngdesc="myPic-003"></a>

```

And this goes all the way up to whatever number I want. Then I just name my images accordingly and point the image source in script to the folder that contains the images and thumbnails and upload it to the server. If I want the use a different name for the images, I can use find/replace.

Doing it like this, I can build a gallery with hundreds of photos in a few minutes.

---

<div class="post-metadata">

### Author: ![jo-r](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/jo-r/32/1926_2.png) [@jo-r](https://forum.bootstrapstudio.io/u/jo-r)
#### Post date: [May 5, 2023, 8:29pm UTC](https://forum.bootstrapstudio.io/t/do-you-have-a-favorite-vanilla-javascript-lightbox/10218/15 "2023-05-05T20:29:09Z")

</div>

True, that’s basically what I used to do with WowSlider, but they stopped bothering to update it or add any features to it so … meh lol

---

<div class="post-metadata">

### Author: ![printninja](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/printninja/32/481_2.png) [@printninja](https://forum.bootstrapstudio.io/u/printninja)
#### Post date: [May 5, 2023, 11:43pm UTC](https://forum.bootstrapstudio.io/t/do-you-have-a-favorite-vanilla-javascript-lightbox/10218/16 "2023-05-05T23:43:27Z")

</div>

Way back when I first got into web development, I bought a whole suite of programs that included WowSlider, Visual Lightbox, Video Lightbox, CSS3 Menu Maker, Vista Photo Gallery, jQuery Menus and one or two others. They were all originally free versions with watermarks, and I think it was around $79 to buy the whole package that removed the watermarks, so I bought it.

Eventually, it seems they all got acquired (or were possibly already owned) by the company that makes the (relatively awful) Mobirise website builder. Most of these programs have become outdated, and there are better alternatives out there now.

And as you noted, they really haven’t been actively been developing or updating WOWSlider (or any of the other programs I mentioned.) WOWSlider uses jQuery, which we’re moving away from, and it’s a rather cumbersome install anyway.

Visual Lightbox was unique in that the software automatically generated thumbnails from the full-sized images (something I’ve yet to find in any other lightbox software,) but I’ve recently noted bugs in Visual Lightbox on mobile devices, and it’s unlikely they’ll fix them since the last update to the program was August 2021. And it also uses jQuery, so just another reason to find a replacement.

I really like [Nanogallery2](https://nanogallery2.nanostudio.org/). It has a lot of cool features, and is very customizable, but it’s also built with jQuery, and it hasn’t been updated since Jan 2021, so I don’t expect a vanilla JS version is in its future.

Which brings us to the reason I posted this topic.

---

<div class="post-metadata">

### Author: ![richards](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/richards/32/3163_2.png) [@richards](https://forum.bootstrapstudio.io/u/richards)
#### Post date: [May 6, 2023, 10:25am UTC](https://forum.bootstrapstudio.io/t/do-you-have-a-favorite-vanilla-javascript-lightbox/10218/17 "2023-05-06T10:25:02Z")

</div>

Why not use Nanogallery if you like it, you could set your bss file to only load jquery and the nano js/css on pages that require the use of the gallery.

Really jQuery is only around 30kb and takes 50ms to load.

---

<div class="post-metadata">

### Author: ![printninja](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/printninja/32/481_2.png) [@printninja](https://forum.bootstrapstudio.io/u/printninja)
#### Post date: [May 6, 2023, 7:15pm UTC](https://forum.bootstrapstudio.io/t/do-you-have-a-favorite-vanilla-javascript-lightbox/10218/18 "2023-05-06T19:15:00Z")

</div>

I don’t mind the overhead of jQuery. I have used it on most of my sites. I’m just trying to be proactive with new builds, and rely strictly on vanilla JS. I suspect that apps built with jQuery are going to start to languish. Hopefully the Nanogallery2 developers are working on a vanilla JS version of their app, but the last update was Jan 2021, so I feel it’s prudent to start looking for a good replacement.

---

<div class="post-metadata">

### Author: ![Sonidojeda](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/sonidojeda/32/3513_2.png) [@Sonidojeda](https://forum.bootstrapstudio.io/u/Sonidojeda)
#### Post date: [June 12, 2023, 4:58pm UTC](https://forum.bootstrapstudio.io/t/do-you-have-a-favorite-vanilla-javascript-lightbox/10218/19 "2023-06-12T16:58:03Z")

</div>

I couldn’t get the “veobox2” to work. Can you help me with that? Please…

---

<div class="post-metadata">

### Author: ![kuligaposten](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/kuligaposten/32/1190_2.png) [@kuligaposten](https://forum.bootstrapstudio.io/u/kuligaposten)
#### Post date: [September 10, 2023, 11:19pm UTC](https://forum.bootstrapstudio.io/t/do-you-have-a-favorite-vanilla-javascript-lightbox/10218/20 "2023-09-10T23:19:33Z")

</div>

I made my own lightbox which has become my favorite lightbox.  
Have a look

> **[Lightbox Gallery](https://bss.kuligaposten.com/example/lightbox/)**
>
> Lightbox for a gallery with images, youtube videos , html videos and iFrames

---

<div class="post-metadata">

### Author: ![printninja](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/printninja/32/481_2.png) [@printninja](https://forum.bootstrapstudio.io/u/printninja)
#### Post date: [September 11, 2023, 12:31am UTC](https://forum.bootstrapstudio.io/t/do-you-have-a-favorite-vanilla-javascript-lightbox/10218/21 "2023-09-11T00:31:35Z")

</div>

I would make three minor changes…

1. Change object-fit from cover to contain. Images are getting cropped on mobile.
2. Add swipe support
3. Make the arrows in the prev/next buttons larger (for old farts like me with bad eyesight 😛)

[Next page](https://forum.bootstrapstudio.io/t/do-you-have-a-favorite-vanilla-javascript-lightbox/10218.md?page=2)
