edanzer

@starhorsepax2 – Sorry for delay. The CSS you use would depend on the gallery markup, and on whether you are using an icon library for the icon. But for example, say you had this markup:

<a class="img-zoom" href="large.jpg">
  <img src="thumb.jpg" alt="">
</a>

One option without an icon library might look like this:

.img-zoom{
  position: relative;
  display: inline-block;
}

.img-zoom::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:56px;
  height:56px;
  transform:translate(-50%,-50%);
  pointer-events:none;

  /* optional styling */
  background:rgba(0,0,0,.45);
  border-radius:999px;

  /* magnifier icon (white) */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M10 2a8 8 0 105.293 14.293l4.707 4.707 1.414-1.414-4.707-4.707A8 8 0 0010 2zm0 2a6 6 0 110 12 6 6 0 010-12z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size:28px 28px;
}

Or if you use FontAwesome it might look like this:

.img-zoom{ position:relative; display:inline-block; }

.img-zoom::after{
  content:"\f002";                 /* magnifying glass */
  font:900 24px/1 "Font Awesome 6 Free";
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  color:#fff;
  background:rgba(0,0,0,.45);
  width:56px; height:56px;
  border-radius:999px;
  display:grid; place-items:center;
  pointer-events:none;
}

Worth noting this CSS is all applied to the gallery itself, not to anything inside the lightbox.

For now, as is this is not our issue really, and we’ve got a tentative solution, I’m going to mark this complete, but feel free to reply again.

I think you mean having something like a small icon that sits on the image to tell visitors ‘you can click this and open the image.’ For now, there’s nothing like that built into the free plugin. You’d need to add it custom, which you could probably do with some CSS. The Pro plugin shows a zoom icon on the lightbox header (if enabled), but that’s also only once inside the lightbox.

For now, I’ll add this as a feature request.

@sasinduh – sorry for delayed response. Yes, I will remove this for the next release.

Have you tried using the ‘Automattically group images’ setting? You’ll find it under Lightbox, under the Images section. If you set it to ‘Disable’, images will not be grouped at all. If you set it to ‘All in one gallery’, it will treat all images on a page as one gallery. Would one of those achieve what you want?

There’s also a ‘custom grouping’ option there, but to add/edit custom groups is pro/paid feature.

I’m not sure all of what may have changed on your site (site updates, plugin updates, etc), but I think I can see the issue.

If I click on one of the images on your site url you shared, I get this error in the browser console:

Mixed Content: The page at 'https://ledcorp.co.za/products/led-blackseries-floodlight-series/' was loaded over HTTPS, but requested an insecure frame 'http://ledcorp.co.za/LED-X1-Floodlight-10W.html'. This request has been blocked; the content must be served over HTTPS. (jquery.min.js?ver=3.7.1:2)

The second url, which is the link you’re trying to open in the lightbox, is an ‘http’ link, not ‘https’. That’s causing a JavaScript error which is preventing the page content from loading inside the lightbox.

From the dev inspector tools, I updated that to https and it worked.

Can you try updating a couple of those urls to https and see if the issue is resolved for you?

@one3rdnerd – Unfortunately, there is not an option for this. You’re one of very few users to raise a concern about it over the years (though I can personally understand your sentiment – the loading icons are provided by the Fancybox scripts, and the classic Fancybox scripts have been around a long time now).

In any case, as you guessed, the way to do this is via CSS. Thanks for sharing!

If the team were going to address this, I assume we’d add an option to choose a loading icon or turn it off. Right now, that’s not on our agenda, but if we get some more feedback/votes, we’d be happy to take a look at what’s involved.

Since we’re not planning action right now, and since there’s a work around provided here, we’re going to mark this resolved. But feel free to follow up with questions or concerns.

Since you’re in touch with the team via email and the issue was addressed there, we’re going to mark this thread resolved. If there are outstanding issues, feel free to continue on email.