Group fancybox items for next and previous functionality

Question

So the fancybox plugin works on my site but only for single images, so I'm not able to scroll between them, or switch with next-prev buttons. I know that fancybox needs to see the group to enable this, but I got stuck here and still get only the single images. Here's my jQuery snippet and HTML structure:

Many thanks for any help.

$('dl.gallery-item').each(function(index) {
    var rel = "group"; // +$(this).attr('id');
    $('.gallery-item a').addClass('fancybox').attr('rel', rel);

});
$('.fancybox').fancybox(); 

<div id="gallery-1" class="gallery galleryid-15 gallery-columns-4 gallery-size-thumbnail">
      <dl class="gallery-item">
            <dt class="gallery-icon landscape">
                <a href="//localhost:3000/path-to-image" class="fancybox" rel="group"><img width="253" height="164" src="path-to-image" class="attachment-thumbnail size-thumbnail" alt=""></a>
            </dt></dl><dl class="gallery-item">
            <dt class="gallery-icon landscape">
                <a href="//localhost:3000/path-to-image" class="fancybox" rel="group"><img width="253" height="164" src="path-to-image" class="attachment-thumbnail size-thumbnail" alt=""></a>
            </dt></dl><dl class="gallery-item">
            <dt class="gallery-icon landscape">
                <a href="//localhost:3000/path-to-image" class="fancybox" rel="group"><img width="253" height="164" src="path-to-image" class="attachment-thumbnail size-thumbnail" alt=""></a>
            </dt>
      </dl>
</div>

Answer 1

Here is your HTML with a working Fancybox implementation:
https://jsfiddle.net/alan0xd7/z3h8zf65/

This is using the latest Fancybox version 3.0.47

Basically the only change is instead of using rel, it is data-fancybox for groups.

If you cannot get it working, edit my fiddle and show what exactly your code looks like.

Hope this helps!