0

My Wordpress installation is ver 5.6 and Jquery ver 3.5.1.

Wordpress Gallery block supports the link to the media image large file, but the link opens the image in the same windows. I usually use Fancybox class to < a > tag to open large image in a popup (a href="big-image.jpg" class="fancybox"...).

The block gallery doesn't support class to link so I wrote a JQuery script and placed it in the footer to ADD the class to the href images of the gallery. The script starts ad document.ready.

here is the script:

jQuery(document).ready(function ($) {
 $("li.blocks-gallery-item figure a").addClass("fancybox");
 $("li.blocks-gallery-item figure a").attr('rel', 'gallery-wpblock');
});

Everything works fine until updated to WP 5.6.

If I load the WP Jquery 3.5.1 the script APPLY the class to the < a > tag BUT DOESN'T WORK, so I click the image and it opens in the same windows.

But if I load JQuery 2.2.4 the script apply the class to the < a > tag AND IT WORKS WELL, so I click the image and it opens in a popup.

Any suggestion?

Thank you in advance

1
  • Perhaps try to move this to an event listener - for example: window.addEventListener( 'load', ... ); – Q Studio Dec 25 '20 at 9:04
1

GREAT... thank you very much. It opens my mind. I've tried to translate this eventListener in bind jQuery version, but I can't. So I modified the FancyBox Jquery to read directly wp block < a href >

$("li.blocks-gallery-item figure a").fancybox({
  /* wp block version */
});

$('.fancybox').fancybox({
  /* fancybox default standard */
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.