steveush

Hi @andywood,

Thanks for reporting this, this seems like a bug in the new version. Do you have an email where I could send you an updated JavaScript file with a fix to test?

Thanks

Hi,

I’m not sure if you have edited your theme but all the initialization code for FooGallery as well as FooBox has been commented out on the above linked page. If you open your browsers development tools and scroll down looking at the HTML the entire footer is commented out. Along with FooBox and FooGallery other scripts that have been commented out include: Comment Reply, Contact Form 7 and WP-Embed.

Thanks

Hi @worldwebsite,

You can use the below CSS to allow the caption title to wrap to new lines:

.foogallery.fg-simple_portfolio .fg-caption-title {
	white-space: normal;
	overflow: visible;
	text-overflow: initial;
}

Thanks

Hi @worldwebsite,

Which template are you using? I’m guessing the Masonry template? The CSS for the column layouts in that template forces the 4 or 5 column layout to 3 columns when the width of the device/page is smaller than 720px, 2 columns when smaller than 480px and then 1 column when smaller than 320px. These values should match the previous versions column auto-adjust so I’m not sure why you would be seeing only a single column where before you were seeing two.

As for the loading, could you provide a link to your site so I can see the loading issue? One thing to take into account with the latest version is that it has lazy loading built in. The images in the galleries will not be loaded until they are needed/visible.

Thanks

Hi @jayrenn,

I’ve been digging into this and it seems your theme has an option somewhere for an ajax loading screen. When enabled the themes JavaScript binds to every anchor in the page that the following (extremely long) selector matches:

a[href]:not(.no-ajaxy):not([target="_blank"]):not([href^="#"]):not([href^="mailto:"]):not(.comment-edit-link):not(.magnific-popup):not(.magnific):not(.meta-comment-count a):not(.comments-link):not(#cancel-comment-reply-link):not(.comment-reply-link):not(#toggle-nav):not(.logged-in-as a):not(.add_to_cart_button):not(.section-down-arrow):not([data-filter]):not(.pp):not([rel^="prettyPhoto"]):not(.pretty_photo)

The specific code can be found on line 12075 of the https://soulmazing.com/wp-content/themes/salient/js/init.js file. As you can see they specifically make exceptions for Magnific and PrettyPhoto lightboxes in this selector but any other type of lightbox would cause this same issue to occur.

There are basically three options you have to correct this:

1. Ask the theme developers to change this behavior so it works with FooBox as well.
2. Add the no-ajaxy class to every anchor you want displayed with FooBox.
3. You can modify the JavaScript yourself and add in :not(.foobox):not([target="foobox"]) to the end of the selector on the previously mentioned line but this change would be lost when updating the theme.

Thanks

• This reply was modified 7 years, 7 months ago by steveush. Reason: Changed `.no-ajaxy` to `no-ajaxy`

Hi @plimfec,

Unfortunately this is not the easiest thing to do with the way FooBox’s HTML is laid out in the free version. In the PRO version we actually have made changes which allow for various open/close transitions to occur but they require JS, CSS and HTML changes which the free version simply does not have included. That said there are some things you can try.

First off there are certain classes applied to the main container (.fbx-modal) for FooBox during certain phases, to handle open/close transitions the most notable for you would be fbx-loading and fbx-show. As you can probably guess the fbx-loading class is applied when any of the images are loading (both first time load and switching between images). The fbx-show class is applied when we want to actually display the inner container (.fbx-inner) with the images and buttons, in the free version this simply toggles the visibility between hidden and visible.

So knowing the above we can get a very simple fade in transition by doing something like:

.fbx-modal .fbx-inner {
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.6s ease, visibility 0.6s ease;
}
.fbx-modal.fbx-show .fbx-inner {
	visibility: visible;
	opacity: 1;
}

But this does have a drawback, the transparent backdrop will appear almost instantly and the loader will be visible, only the actual inner container with the image and buttons will fade in/out of view when opening/closing the modal. We can’t really apply the fade in/out to the backdrop as it is the root container for the modal and if we hid it until loading was complete you would never see the loader at all, which would probably make people wonder if anything is happening when opening larger images.

Thanks

Hi,

Just noticed a mistake and I can no longer edit my original response, I switched in opaque when I meant to say transparent in the first sentence of the second paragraph.

The issue is the opacity is never actually changed to 1 even though the complete callback is executed and so you don’t ever get to see the next image as it is still opaque transparent.

Thanks

Hi,

Please bear with me as this may turn into a long post but to sum it up I think your Avada theme is altering jQuery’s .animate function by changing the way jQuery’s fx queue works and is effectively breaking the .animate function on your site. This is why you are seeing just a white square instead of the next image. FooBox uses .animate to transition between images using a very simple call which boils down to something like this:

jQuery('.fbx-show .fbx-item-current').animate({opacity: 1}, 200, function(){
	console.log('The items opacity should now be 1 but it is still 0');
});

The issue is the opacity is never actually changed to 1 even though the complete callback is executed and so you don’t ever get to see the next image as it is still opaque. You can actually use the above code snippet and open the developer console on your site and test this for yourself when you see the blank white square. Just paste it into the console and hit enter. Running the above should set the new image’s opacity to 1 allowing you to see it but it never does. To confirm that the jQuery selector is correct you can run the below in the console which just uses jQuery’s .css method to set the opacity and you can see it change as expected and you can then see the image:

jQuery('.fbx-show .fbx-item-current').css('opacity', 1);

Stepping into their code in the “https://brokenwings.com.au/wp-content/themes/Avada/assets/js/main.min.js?ver=5.0.5” file I managed to find a block of code (line 14000-14030 if you pretty print the minified code) that alters jQuery’s fx queue to use the new requestAnimationFrame which is what I think is causing the issue.

In jQuery 1.x.x or 2.x.x it simply made use of the setTimeout or setInterval methods to perform animations which could lead to them being a bit choppy, Avada’s code block attempts to resolve this issue by modifying the default behavior to use requestAnimationFrame if it is available. I think the actual problem occurs because you are using jQuery 3.x.x which now natively uses requestAnimationFrame under the hood and the “enhancement” supplied by Avada is now not compatible with it.

I see you use a plugin (jQuery Updater?) to keep your jQuery up to date, this may be the root cause of your issue as looking at the Avada code I’m not sure it is compatible with jQuery 3.x.x and you are currently running 3.1.1.

Please try disabling the jQuery updater plugin and using either the default WP version of jQuery, the one that came with your theme or a version in the 1.x.x or 2.x.x range and see if the problem is resolved.

Thanks

• This reply was modified 7 years, 11 months ago by steveush. Reason: Fixed formatting

Hi muazii,

This is actually due to Bootstrap’s CSS setting the label which shows the item count to display as a block element instead of its default inline. Adding the below CSS to the page should resolve the issue:

.foogallery-image-viewer .fiv-count {
  display: inline;
}

How you decide to include this is completely up to you though. As an example you can add it to your sites style.css so it is enforced site-wide or you can add it on a per gallery basis using the Custom CSS option provided by FooGallery.

I’ll include this fix in a future update to avoid this issue going forward but for now the above should resolve the problem for you.

Thanks

Hi muazii,

Do you have a url where I could see the issue live? This looks like a CSS conflict with your theme and I would need to see the actual page to resolve it.

Thanks

Hi,

This is actually due to a feature in FooBox that detects elements with matching rel attributes and combines them into a single modal popup. At the moment all of your images across all of the galleries have the same rel value, "tc-fancybox-group17", this is the reason they are all being grouped together and you see the counter display X of 97.

I’ve just double checked and unfortunately the option to configure this behavior is not exposed in the free versions admin interface which means at present you only have two options to correct this issue:

1. Remove the rel="tc-fancybox-group17" attribute from your images.
2. Include the following JS snippet in your page after the foobox.free.min.js file is included:

<script type="text/javascript">
	if (window.FooBox){
		window.FooBox.defaults.rel = '__none__';
	}
</script>

Thanks

Hi Bryce,

There is a small conflict with your theme CSS which you should be able to resolve by including the following CSS on your page or by adding it to your themes style sheet.

.foogallery-container a > img {
	margin: 0;
}

Thanks

Hi Martin,

Which browser dev tools are you seeing these errors in? The CSS you specified above is vendor specific but perfectly valid CSS which provides the opaque background for the modal in IE8 and 9 and so shouldn’t be removed. The noie7 file simply removes the one time CSS expressions used for IE7 icon font support which most page-speed analyzes raise as critical errors.

Thanks

Hi,

Could you please try the latest develop branch of FooGallery available on GitHub using this download link. I have created some fixes which I think should resolve both your responsive issue as well as the alignment issue when using Position – Full Width (Block).

Thanks

Hi,

There was an issue with IE and some of the templates. I have created fixes for theses templates this morning in the develop branch of FooGallery on GitHub, including the templates you are using on your site. You can grab that version using this download link.

Thanks