Fancybox Gallery Navigation Not Working

Question

I'm using Fancybox for photo galleries on multiple WordPress websites.

Since upgrading to the newest Fancybox code, I'm having a problem with Fancybox gallery navigation not working.

The photos open perfectly, but they are not linked together.

Here's the simple code I'm using within the head:

<!-- Fancybox -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.25/jquery.fancybox.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.25/jquery.fancybox.min.js"></script>

The galleries are generated using WordPress default media gallery shortcode.

This is my fancybox call:

<script type="text/javascript">
jQuery(document).ready(function($) {
    $(".gallery-icon a").fancybox({ 
        animationEffect : 'fade'
    }).attr('rel', 'group1');
});
</script>

As you can see, I'm attempting to assign rel="group1" to the links. I've also tried the attribute "data-fancybox-group".

Neither are working.

Here's the link:

Demo Website

Any ideas on how to get the navigation buttons appearing and link these photos as a gallery?

Could it be a jQuery version issue?

Answer 1

Galleries are created by adding the same data-fancybox attribute value.

For example:

$(".gallery-icon a").fancybox({ 
  animationEffect : 'fade'
}).attr('data-fancybox', 'group1');

Demo - https://codepen.io/anon/pen/EwpOxE?editors=1010