为下一个和上一个功能分组 fancybox 项目

Question

所以 fancybox 插件可以在我的网站上运行，但仅适用于单张图片，因此我无法在它们之间滚动，也无法使用下一张-上一张按钮切换。我知道 fancybox 需要查看组才能启用此功能，但我被困在这里并且仍然只能获得单个图像。这是我的 jQuery 片段和 HTML 结构：

非常感谢您的帮助。

$('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

这是您的 HTML 一个有效的 Fancybox 实现：
https://jsfiddle.net/alan0xd7/z3h8zf65/

这是使用最新的 Fancybox 版本 3.0.47

基本上唯一的变化是不再使用 rel，而是 data-fancybox 用于组。

如果您无法使其正常工作，请编辑我的 fiddle 并显示您的代码究竟是什么样子。

希望对您有所帮助！

为下一个和上一个功能分组 fancybox 项目

Group fancybox items for next and previous functionality

javascript

jquery

fancybox