fancybox3 导航箭头在自定义链接中始终可见答案

【问题标题】：fancybox3 navigation arrows always visible with custom linksfancybox3 导航箭头在自定义链接中始终可见
【发布时间】：2018-02-27 16:31:29
【问题描述】：

我找到了一些提示，但主要针对 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">

所以它们是独立的照片，与普通画廊无关。然后，在选择上述任何一张照片后，我希望有指向 prev 和 next 的链接，例如：

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

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

我用以下方式初始化fancybox：

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

我想做的是让箭头始终可见，并定义 prev 和 next 函数，这些函数根据 img 的一些数据属性（使用 ajax）加载新照片。

谢谢，马克

【问题讨论】：

标签： fancybox-3

【解决方案1】：

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

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

【讨论】：

【解决方案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');
            });
        }
    },
});

谢谢。很棒的图书馆！

【讨论】：