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…
Feature rich, but technically not free for commercial use
Fewer features than lightgallery, but totally free under the MIT license
Not bad. The free version is kinda basic. The paid version has a few nice extra features.
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.
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
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.
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.
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.
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.
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…
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.
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. 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.
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.
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.
)