steveush

Hi @hollykny

We did have an issue with some themes setting min-width and min-height to 0 on all anchor elements which was causing Edge to have an issue with the display:flex property and some additional CSS was added to resolve it. This extra CSS was simply setting the min-width and min-height properties on the thumbs anchor elements back to auto.

That being said in your current version of the plugin there is an earlier attempt at the fix which was making use of the unset value instead of auto and is obviously still causing you an issue. I think this change from unset to auto simply has not been pushed out yet to the free version but I’ll check on that after this.

To fix your issue now instead of waiting for the next release you can simply add the following CSS to your sites styles.css file to correct the problem site wide.

.foogallery.fg-simple_portfolio .fg-thumb {
    min-width: auto;
    min-height: auto;
}

That should resolve the issue until the latest code branch is pushed to free.

Thanks
Steve

Hi @j9design

The issue here is that the first row of three images in the “Interieuradvies Vries” category are wrapped in a DIV with a class of gallery on it. The way FooBox initializes itself is that it simply loops through a list of CSS selectors and builds the required lightbox(es). The first selector in this list is .gallery so what is happening currently is that FooBox is initializing in the page, it finds the DIV.gallery containing the first three images and constructs a lightbox for them. While building the initial lightbox for these three images it sees that they are using the rel=gallery attribute and so it then queries the page for any other elements with rel=gallery and includes them into the lightbox in the order they are found. This is why your large image is appearing as image number four and not image number one.

Unfortunately in the free version there is no option to change the selectors or the order in which they are executed. That said there are a couple options to work around the issue:

1. You could remove or change the name of the gallery class which has been added to the DIV containing the first three images.
2. Or you could try adding the gallery class to the DIV container around the large primary image. FooBox works from the top of the DOM down to the bottom so adding the gallery CSS class to the primary image container should force FooBox to initialize on it first and then include the rest of the rel=gallery items in the page in the order they are found.

Thanks
Steve

Hi,

Ok, clearing the cache fixed the first issue I was seeing where FooBox was not loading at all on that gallery.

The second issue I can see now where the icons are missing is being caused by another plugin adding in the following CSS to your page:

body, h1, h2, h3, h4, h5, h6, p, blockquote, li, a{
font-family: 'hel2' !important;
}

The !important declaration on this style is overriding the font icons FooBox uses for its’ own buttons as they are a elements in the page.

You can either contact the other plugin author asking how to prevent the !important declaration being added as it is bad practice or you can try adding the following CSS to your site using your styles.css file.

.fbx-modal .fbx-error-msg>span,
.fbx-modal .fbx-loader>div,
.fbx-modal a.fbx-close,
.fbx-modal a.fbx-next,
.fbx-modal a.fbx-prev {
	font-family: foobox !important;
}

Thanks

For any users viewing this thread with a similar issue and looking for a resolution, the fix required a JS update to the plugin. This change will be included in the next release of FooGallery.

Hi @brenthutto, @phillcoxon,

What you are seeing now is the expected behavior. From a frontend JS & CSS point of view, Portfolio must be supplied both a width and a height for the thumbnails to function correctly. It was never designed or tested to work with only one or the other being supplied. I’m glad you found a workaround however I cannot guarantee that it will remain viable with future releases as this is not how it was intended to be used.

This is more an issue with the width and height options not being set as required for this template which has allowed the creation of a gallery in an untested format.

I’ll keep this in mind going forward and see if it is viable to handle this however at present the functionality you are looking for is not supported by this template.

Thanks

Hi @alexhike,

I believe the issue here is being caused by another plugin that is shortening your image URLs, specifically the URL’s set on FooGallery’s thumbs which point to the full size image. So the FooGallery thumbs’ href attribute is being converted from http://www.alexhike.ca/wp-content/uploads/2019/09/WEJB2245.jpg to http://www.alexhike.ca/wejb2245/.

FooBox can open multiple types of URLs such as videos, iframes, raw HTML and images however to be able to do so it inspects the URL of the item to determine how to open it. In this case you are using FooBox Free which only supports opening images. To determine if a URL is an image it inspects it and sees if it contains a filename and extension, specifically it checks for the following extensions: jpg|jpeg|png|gif|bmp|webp|svg.

If the URL does not pass this check then FooBox doesn’t know how to load it and so skips the item entirely. If there are no items found at all FooBox performs a cleanup of any used resources and then destroys itself. This is currently what is occurring in your page.

What is the name of the plugin you are using to shorten the URLs? Is it possible to exclude FooGallery items from being converted?

Thanks
Steve

Hi @marilyn1998,

I believe the issue is resolved in the plugin. I have tested each of the three URL’s you provided in Firefox, IE9+, Edge and Chrome on Desktop. I also tested in Safari and Chrome on my iPhone & iPad. All galleries including the one in the footer are loading on all pages.

I think this is your device caching the old resources for pages you have previously visited, which is why the new test page https://www.marilynstreats.com/foo-gallery-test/ is working. On mobile devices, especially Apple devices, the browser caching is extremely aggressive. Please try testing on another device or clearing your cache again.

Thanks