I use Firelight Lightbox because Metaslider requires an additional lightbox plugin. (I’m on WP version 6.8.2, Firelight Lightbox (FL) 2.3.17, Metaslider 3.100.1) Nearly all the images on my website include a caption with a link to the photo origin, ex: a Wikimedia page.
About a month ago, perhaps after an upgrade, FL continued to show a lightbox when I clicked on an image but when I click on a caption it returns “The requested content cannot be loaded. No image found.” My captions have always pointed to webpage sources, not images. This used to work.
I deactivated FL plugin (turned off lightbox effects) and now the caption links work. For now I am leaving FL deactivated (in case you click the “page you need help with”) because I really need the caption links to work. Send me a message to turn it back on so you can see what I mean. How to fix this so both work?
The page I need help with: [log in to see the link]
Hi @kperegrine – Can you explain where/how you are adding links to the image caption? I don’t think you can add those in the media library or in image meta data? Is that added with Metaslider?
In any case, I’m not 100% sure our plugin will display links correctly in captions, largely because we aren’t expecting them to be there. We’ve had other feature requests to allow users to add and display rich-text captions, so this request seems along those lines.
I will ask the devs to check this and get back to you on what’s possible.
There is a caption area on the image block — choose it at the [] in the tools band. To enter a caption I choose the [], type a caption, then highlight the text and put a link on it. i.e. the <figure> has a <figcaption> for text + link.
I put links on all images that are not my own. I do not put links on Metaslider captions.
I was going to show you the HTML behind the link on the pasted image below (It is a regular old image on my blog, not Metaslider). It was automatically turned it into a real image with caption. If I had Firelight Lightbox turned on and you clicked on the caption link, you’d see the “Requested content cannot be loaded” message.
Hi! I think I understand the issue. Can you tell me if you are adding a fancybox class like ‘fancybox-iframe’ to your link? Normally that would be needed to open a link to a third party website.
I added a page to our site that demos a few things here:
You’ll see two images. The first is added via the core image block. I added/updated a caption as you suggested and added two links. The first link is just to an image on my site and works. We autodetect image links. The second link is to Wikipedia, and if I just add the link, it links to the page, but not in the lightbox.
To get a link to a third party site to open in a lightbox, you need to apply ‘fancybox-iframe’ as a CSS class on the link. There’s now way to do that in the context of an image caption.
So to duplicate, I copied the markup from the frontend, went back to the editor, and copied in the markup using an html block. That allows me to customize the markup. I think updated the wikipedia link to have the fancbox-iframe class, and you’ll see that now opens in the lightbox.
Here’s the html I’m suing in the second image. Note the fancybox-frame classes on the links.
<div class="wp-block-image"> <figure class="aligncenter size-large"> <img decoding="async" src="https://firelightwp.com/wp-content/uploads/2025/03/Landscapes-818-020-1024x684.jpg" alt="" class="wp-image-1464"> <figcaption class="wp-element-caption">Some dramatic clouds and light from the setting sun on Catherdral Rock in Sedona Arizona.<br>I’m now adding <a href="https://firelightwp.com/wp-content/uploads/2023/11/Landscapes-818-007-scaled.jpg" class="fancybox image" aria-controls="fancybox-wrap" aria-haspopup="dialog">a link to a separate image</a> to this caption. It should open in a lightbox. <br>Here's a link to <a href="https://en.wikipedia.org/wiki/WordPress" class="fancybox-iframe">wikipedia</a> with the 'fancybox-iframe' class. <br>Here's a link to <a href="https://google.com" class="fancybox-iframe">google</a> with the 'fancybox-iframe' class. </figcaption> </figure> </div>
—
First can you confirm you’re adding fancybox-iframe in some way if possible? If not, I’m not sure how our lightbox would detect that link and open it.
As a secondary note… the ability to open a third party website in a lightbox can run into cross origin permission/security issues. Many websites do not allow it. Wikipedia does. But google.com does not. To demo that, I added a link to Google with the exact same markup, and you’ll see that one fails.
Thanks for looking into this. No, I have not added “fancybox-iframe” to any of my links. I do add target=”_blank” and rel=”noreferrer noopener” If fancybox-iframe is required, then that’s the problem. … What I don’t understand is that the links worked for a month or two after I installed Firelight. Then stopped.
In case you need more info: Here’s my html for an image on my blog –> without <brackets> so it doesn’t make it an image. Each line has brackets at start and end … except that the img line is so long that it has a natural line break.
In short, you have a regular image block, and you are adding caption below the image with the built in image caption functionality. Then the caption contains a link to a third party page, like Wikimedia. Historically, that link takes you to the Wikimedia page. Right now it’s opening a lightbox with that error.
From your markup, I can see the issue. The caption link you shared shows a a link to a .jpg file. Our lightbox automatically image file links and tries to open them in a lightbox. So it’s perceiving that link as an image on the file type extension, and trying to open it in a lightbox.
Do you know, when this was working in the past, if your caption links were to regular html pages, rather than image files? Links to web pages will work normally.
The simplest way for you to fix this is go to Lightbox settings, then look for the Miscellaneous section, then look for the ‘Exclude’ option. You can add a list of CSS classes to exclude from the lightbox detection. For a caption link, you’d want this:
.wp-element-caption a
That will tell our lightbox to exclude a tags within captions, regardless of what they are linking too. You’ll probably want to append that to the list of existing exclude classes, rather than replacing those. Try that and let us know if it works.
_female_and_young_5.jpg”){kind=link}