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

时间:2018-02-27 16:31:29

标签: fancybox-3

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

2 个答案:

答案 0 :(得分:0)

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

  1. 创建与fancyBox无关的简单链接(例如,没有 data-fancybox)并添加自定义点击事件。

  2. 然后,在click事件中,创建返回对象集合的ajax请求。

  3. 最后一步是以编程方式打开fancyBox,     例如,使用$.fancybox.open([ array of links ], { options });

答案 1 :(得分:0)

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');
            });
        }
    },
}); 

感谢。很棒的图书馆!