banthagroup / fslightbox

An easy to use vanilla JavaScript plug-in without production dependencies for displaying images, videos, or, through custom sources, anything you want in a clean overlying box.
MIT License
351 stars 30 forks source link

Allow to specify target via data attribute to support graceful fallback when JS is not available #166

Closed homeworkprod closed 1 year ago

homeworkprod commented 3 years ago

Hi @piotrzdziarski!

First of all: thanks for the great library! I've been looking quite a while for a simple, clean, vanilla JS lightbox with an open license. Not having a separate stylesheet is a nice bonus on top.

Regarding my change: I'm interested in a way to use the lightbox as an enhancement to an "old school" static-file gallery with one HTML document as the index with thumbnails plus one HTML document for each full-size image.

Since fslightbox "hijacks" the href attribute, the original links to the separate pages don't work anymore.

Here I propose a change that first looks in a data attribute, data-href, before falling back to href.

As a result, using links like this in the index works as before when JavaScript is not available and will use the lightbox when it is, straight from the same HTML:

<a href="image001.html" data-fslightbox data-href="image001.jpeg"><img src="image001-thumbnail.jpeg"></a>
<a href="image002.html" data-fslightbox data-href="image002.jpeg"><img src="image002-thumbnail.jpeg"></a>
<a href="image003.html" data-fslightbox data-href="image003.jpeg"><img src="image003-thumbnail.jpeg"></a>

What do you think?

I have not extended the list of the custom attributes as I'm not sure if that's really necessary, and if that doesn't break anything by removing the data- prefix (if I understood that correctly).

PS: I'm no JavaScript performance expert, but wouldn't it at least lead to more readable code if a[i] in the loop where I made the change would be mapped to a variable?

Have a nice weekend!

homeworkprod commented 1 year ago

Hey, thanks a lot for merging this! :D