steveush

Hi @rjmark,

Ok, I managed to reproduce this, it seems the latest version released by Apple, 15.4, made changes to the ResizeObserver API. I upgraded my physical device from 15.3.1, where it was working correctly, to 15.4, and I now see the grey placeholders.

My testing environments are hosted online and so the latest version takes a little time to propagate to them, however it did let me test this in a lot of previous versions with no issue. Those tests along with the error you posted definitely make me think this change to the ResizeObserver API is the culprit.

I’ll hunt down what is actually going on here and I’ll get back to you.

Thanks
Steve

Hi @rjmark,

Could you provide me with some additional information on your device, OS and Safari version? I’ve tested your site using the following:

Safari 15 on Monterey & Big Sur
Safari 14 on Big Sur & Catalina
Safari 13 on Catalina
Safari 12 on Mojave
Safari 11 on High Sierra & El Capitan
Safari 10.1 on Sierra
Safari 9 on El Capitan
Safari 8 on Yosemite

In all of the above all images are loading and things seem as they should.

Thanks
Steve

Hi @agrudick2017,

You can override the default behavior by making use of the FooGallery > Settings > Custom JS & CSS tab.

Once there paste the following into the Custom Javascript input:

FooGallery.Item.prototype.onCaptionClick = function(){};

Then just below it paste the following into the Custom Stylesheet input:

.foogallery .fg-item {
    -webkit-user-select: auto;
    -moz-user-select: auto;
    -ms-user-select: auto;
    user-select: auto;
}
.foogallery .fg-caption {
    cursor: default;
}

Save the settings and the captions should become selectable once more.

Thanks
Steve

Hi @sinergyinaction,

I’m glad we narrowed it down to that setting. As for the reason why I could see it and not you, I could not say without being able to replicate it and debug the issue live in the browser. It could be an extension loaded into Firefox itself, something like Adblock or UBlock or maybe an extension like Stylus for custom CSS that might be accidently hiding the lightbox elements. There could be a number of reasons.

From what you described as there being no action at all after clicking I would think the lightbox is being loaded and is binding to the thumbnails but for some reason the popup itself is not visible for you. The way I would debug this is to re-enable the lightbox, click on a thumbnail so no action occurs, and then inspect the page elements in the browser developer tools looking for the Elementor lightbox elements;

1. To see if they exist after the click and…
2. If they do exist what CSS is being applied to prevent them being displayed.

If I found any CSS hiding the lightbox elements I would then track that back to its source.

I’ll be marking this as resolved as it seems to be an Elementor issue. You might want to open a ticket with them asking about possible reasons as I’m simply guessing, they should have a much better understanding of the internal workings of the lightbox.

Thanks
Steve

Hi @sinergyinaction,

I’m not too well versed on Elementor myself but here is the documentation page to their lightbox feature.

https://elementor.com/help/lightbox/

Perhaps try disabling the lightbox and see if the default action returns to the gallery.

Thanks
Steve

Hi @sinergyinaction,

I’ve tested now using Firefox 96.0.1 (64-bit), Chrome 97.0.4692.71 (Official Build) (64-bit) as well as Microsoft Edge 97.0.1072.62 (Official build) (64-bit). In all these browsers clicking on any thumbnail in the gallery opens the full size image within a Elementor lightbox.

FooGallery FREE itself does not contain a lightbox. By default clicking on a thumbnail should work exactly as if you have clicked on any other link within a page and should direct your browser to the URL provided in the HREF.

If no action at all is being observed as stated in your opening post, then something is intercepting that click event and preventing it from occurring.

Seeing as I am getting an Elementor lightbox popup, I would assumed this is what is preventing the default action for you for some reason.

Please can you try a couple things for me:

1. Make sure your various caches are cleared. Your site cache and browser cache. To clear Firefox cache you can force a hard reload of the page by holding down the Shift key on your keyboard while clicking the Reload page button. For your site cache this could be a plugin you have installed and how that is cleared would be determined by the plugin.

2. If the above does not make the Elementor lightbox display for you then please try simply logging out of your site and accessing the page as a logged out guest. The reason I propose trying this is often caching plugins perform different operations depending on whether or not you are logged in. This could help pinpoint if the issue is related to caching.

This does not seem to be an issue specifically related to FooGallery, but rather the Elementor lightbox attempting to display the images.

Thanks
Steve

Hi @claudiozana,

Could you please let me know what browser, OS and line speed you are experiencing this issue on? I’m trying to replicate and have not had any success just yet.

Thanks
Steve

Hi @sinergyinaction,

Have you resolved this issue? I’ve just had a look at your site and clicking on the thumbnails opens the image within a lightbox on your page. This seems like the desired behavior, so not sure if I’m missing something obvious.

Thanks
Steve

Hi @jwerk13040,

I’m just updating this issue for future reference. I’ve updated all hover effects and presets to include this functionality by default. With the next released version of the plugin you will be able to remove the previously supplied custom CSS which only works for the hover effect “Fade”.

Thanks
Steve

Hi @jwerk13040,

The issue is the way in which justified displays it’s items. The layout is performed by JS and trying to add a margin and outline to the <a/> child element will not work as the parent that controls the size also has overflow hidden set on it. I would simply take another route and instead of your current CSS I would use the following:

.foogallery.fg-caption-hover.fg-hover-fade .fg-loaded .fg-item-inner:focus-within .fg-caption,
.foogallery.fg-hover-fade .fg-loaded .fg-item-inner:focus-within .fg-image-overlay {
	visibility: visible;
    opacity: 1;
}

This makes use of the :focus-within pseudo-class to trigger the hover effect of an item when tabbing through a gallery. This is well supported, except for Internet Explorer, which is no longer supported by WordPress so should not be much of an issue.

Thanks
Steve

Hi @namcew, @bradvin,

This is not being caused by FooGallery or FooBox, there is a script in your theme located at ~/wp-content/themes/rspca/assets/scripts/external-links-new-tab.js which is the cause for this behavior.

Maybe when you updated to 5.8.1 your theme was updated as well and they included this new script?

I would check to see if there is a theme option to disable this behavior as the JS basically forces any link on your site that does not contain your hostname to open a new tab. This means even links that point to something local on the page using #id or if it is handled by other JS like FooBox or FooGallery.

Thanks
Steve

Hi @ssmeredith,

You can hide the captions by simply targeting them with some CSS inside a media query:

@media (max-width: 600px) {
    .fg-caption {
        display: none!important;
    }
}

You’ll just need to adjust the media query to suite your mobile needs. You could also use this same approach to change font-size etc. if you’d prefer to make them responsive.

Thanks
Steve

Hi @juanjodedios,

Could you please try adding the below CSS into the Custom CSS for the gallery with the four people and test to see if it resolves the issue for you? We had to make some changes recently to accommodate changes made in some popular themes and I think this is a by product of those changes. If the below CSS resolves it for you we should be able to fix this in the next version we release.

#foogallery-gallery-22349 .fg-image {
    width: 134px;
}

Thanks
Steve

Hey @saturnusdj,

It has been a while since I had to deal with certs but I think the net::ERR_CERT_COMMON_NAME_INVALID might be popping up because the common name for your cert would be your domain name, marcuspasveer.com, however you are attempting to load assets using a direct IP address over HTTPS. The IP is not the common name in the cert and so it gets rejected as invalid.

Thanks
Steve

Hi @saturnusdj,

I managed to get the issue to occur. It seems you are having HTTP/HTTPS issues. In the console the first error I see is the following:

Mixed Content: The page at 'https://marcuspasveer.com/' was loaded over HTTPS, but requested an insecure stylesheet 'https://18.169.25.212/wp-content/plugins/foogallery/extensions/default-templates/shared/css/foogallery.css?ver=2.0.39'. This request has been blocked; the content must be served over HTTPS.

I’m not sure why this would be happening but we do have an option under FooGallery > Settings > Advanced called Force HTTPS. Please enable this setting, clear all your caches and test again.

Thanks
Steve