Question

我找到了一些提示，但主要是针对Fancybox2而且它们不适用于版本3.

我想在显示弹出窗口时始终显示 fancybox3 导航箭头，但不会创建图库。所以，例如我的HTML将是：

<a data-fancybox="" data-caption="photo10" href="myphoto10.png" title="photo 10">
<a data-fancybox="" data-caption="photo20" href="myphoto20.png" title="photo 20">
<a data-fancybox="" data-caption="photo30" href="myphoto30.png" title="photo 30">

所以他们是独立的照片，与普通画廊无关。然后，在选择上述任何一张照片后，我想要链接到上一页和下一页，例如：

点击 photo10 后，我会在弹出窗口中看到photo10，但左箭头指示我 photo9 ，右箭头指示我 photo11
点击 photo20 后，我会在弹出窗口中看到photo20，但左箭头指示我 photo19 ，右箭头指示我 photo21 等

它更复杂，因为所有这些照片链接都来自AJAX请求，但我在这里简化了示例。

我用以下内容初始化fancybox：

$("[data-fancybox]").fancybox({
    arrows: true
});

我想做的是保持箭头始终可见，并定义基于img的一些数据（使用ajax）加载新照片的上一个和下一个函数。

谢谢， MAC

Answer 1

我建议以不同的方式处理这项任务 -

创建与fancyBox无关的简单链接（例如，没有 data-fancybox）并添加自定义点击事件。
然后，在click事件中，创建返回对象集合的ajax请求。
最后一步是以编程方式打开fancyBox，例如，使用$.fancybox.open([ array of links ], { options });

Answer 2

Janis，感谢您的建议，但是很难处理完整的链接序列（从photo20我希望链接到photo21，然后链接到photo22等）。而且我事先并不知道这些链接的数量，甚至链接本身。

无论如何，与此同时，我在这里找到了你的另一个例子：https://codepen.io/fancyapps/pen/zNdWay这激发了我进一步的实验。现在我的代码完成了我的预期：

$("[data-fancybox]").fancybox({
    afterShow: function( instance, current ) {
        if ( current.$content ) {
            arrowLeft = '<button data-fancybox-prev class="fancybox-button fancybox-button--arrow_left1" title="Prev">&lt;</button>';
            arrowRight = '<button data-fancybox-next class="fancybox-button fancybox-button--arrow_right1" title="Next">&gt;</button>';

            current.$content.append(arrowLeft + arrowRight);

            current.$content.on('click.fb-prev touchend.fb-prev', '[data-fancybox-prev]', function(e) {
                e.stopPropagation();
                e.preventDefault();
                alert('Go To Prev');
            }).on( 'click.fb-next touchend.fb-next', '[data-fancybox-next]', function(e) {
                e.stopPropagation();
                e.preventDefault();
                alert('Go To Next');
            });
        }
    },
});

感谢。很棒的图书馆！

fancybox3导航箭头始终可见自定义链接

2 个答案: