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
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:
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?
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 tohref
.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:
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!