Improve trigger on images with a different a.href

[egantz]

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:

1. Links to itself, so the a element links to the JPG file, and the child img element links to the same JPG file.
2. Links to a different location, so the a links to a website, and the child img 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!

[terrymun]

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.