将fancybox项分组以获取下一个和上一个功能

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!