Improve trigger on images with a different a.href
Opened this issue · 1 comments
Hi! First of all I would like to share my love to this library! keep up the great work.
I was just implementing it in one of my projects and I bumped in an interesting case - When I use jQuery to call fluidbox() on all of the 'a' in the DOM.
I have 2 images:
- Links to itself, so the
a
element links to the JPG file, and the childimg
element links to the same JPG file. - Links to a different location, so the
a
links to a website, and the childimg
element links to the JPG file.
What happens that image #2 breaks because the library doesn't check if both URLs are equal and only then triggers the fluidbox()
I have written a tiny workaround but maybe it will be possible to have an official solution for that?
$('a').each(function() {
const href = $(this).attr('href');
if (href) {
const imgSrc = $(this).find('img').attr('src');
if (imgSrc) {
if (href === imgSrc) {
$(this).fluidbox();
}
}
}
});
instead of just:
$('a').fluidbox();
Many thanks!
Thanks for the very kind words, really appreciate it.
Back to your question: if the anchor element is meant to be pointed to an external URL instead of an image, there is no need to instantiate a Fluidbox instance on it. You can do this by:
- Giving anchor elements meant for Fluidbox a specific class
- Giving anchor elements not meant for Fluidbox a specific class, and use a
:not()
CSS selector or chain a.not()
jQuery filter: - Use basic pattern detection on the anchor element's
href
attribute before attempting to instantiate Fluidbox (assuming that your image URLs always ends with some kind of image extension):$('a').filter(...)
or$(a[href$='jpg'])
.
I believe that the solution you proposed, although completely sound, is not a clean way of resolving this issue. I typically discourage people from using extremely generic selectors, because you are basically offloading all the checking logic to Fluidbox.
Let me know what you feel about this.