-1

I am using WordPress. Fancy box and a lazy loader plugin. However, since adding the lazy load plugin the fancy box has stopped working.

When you initiate the fancybox plugin, you do so with some javascript like so:

var select = $('a[href$=".bmp"],a[href$=".gif"],a[href$=".jpg"],a[href$=".jpeg"],a[href$=".png"],a[href$=".BMP"],a[href$=".GIF"],a[href$=".JPG"],a[href$=".JPEG"],a[href$=".PNG"]');

select.attr('rel', 'fancybox');
select.fancybox();

This fires with the rest of the javascript when the document has loaded. However, now I am getting this error:

select.fancybox is not a function

I am assuming that the lazy loading plugin is taking the images out of the equation so this function isnt able to do anything.

I have tried attaching it again afterwards but I feel like I am going in the wrong direction:

$('html').on('mousemove', 'a[href$=".bmp"],a[href$=".gif"],a[href$=".jpg"],a[href$=".jpeg"],a[href$=".png"],a[href$=".BMP"],a[href$=".GIF"],a[href$=".JPG"],a[href$=".JPEG"],a[href$=".PNG"]', function(){

            $(this).attr('rel', 'fancybox');
            $(this).fancybox();
            
        });

Any ideas?

JamesG
  • 1,552
  • 8
  • 39
  • 86

1 Answers1

0

WordPress now includes browser-level lazy-loading attribute for all images, using the 'loading' image attribute (loading="lazy"). Perhaps you no longer need the lazy loading plugin?

See here: https://make.wordpress.org/core/2020/01/29/lazy-loading-images-in-wordpress-core/

Hillel
  • 811
  • 2
  • 7
  • 19
  • Fancybox isnt a lazy loader. And the issue is because the lazy loader is dynamically adding the images after. I might not need the lazy loader but the issue is still there when turned off. – JamesG Jan 11 '21 at 11:49
  • I would look here: [Fancybox is not a function](https://stackoverflow.com/questions/3992054/fancybox-is-not-a-function) – Hillel Jan 11 '21 at 13:43