• Resolved spitfiresearch

    (@spitfiresearch)


    I’m having a brilliant time with FooGallery! It’s saving me days of work in large image galleries and the features are outstanding. However, I do have one issue. I can view my gallery and click on a thumbnail without a problem. The image expands and I have it in the Foobox window. But when I click on the left or right arrows to move through the gallery images, I just get a white Foobox. The counter below the window counts up and down but I can’t display more than one image. Any thoughts?

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author bradvin

    (@bradvin)

    Can you link to your page so I can look into this issue further please

    Thread Starter spitfiresearch

    (@spitfiresearch)

    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.

    Plugin Author steveush

    (@steveush)

    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
    Plugin Author steveush

    (@steveush)

    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

    Thread Starter spitfiresearch

    (@spitfiresearch)

    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.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Foo Gallery Navigation Not Working’ is closed to new replies.