Can you link to your page so I can look into this issue further please
Awesome! I can’t thank you enough for offering to assist. The link is:
https://brokenwings.com.au/tyabb-2014/
You’ll see what I mean when you click on an image and then try and click the arrows left and right to work your way through the gallery.
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 8 years, 2 months ago by
steveush. Reason: Fixed formatting
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
Steveush, you sir are a genius. Before getting down to a level of trouble shooting that’s probably a little beyond my capabilities, I took your advice and turned off the jQuery updater. Sure enough that fixed the problem straight away. Thank you for taking the time to walk me through your solution in such a detailed way. I really do appreciate the time and effort you put in to assisting me.
Regards.