FancyBox从多个链接打开相同的库

时间:2015-05-06 21:26:25

标签: jquery fancybox-2

当我点击'.fancybox-button'同时保持相同的花式框设置时,如何打开'.fancybox'打开的相同galery?

<div class="custom-thumbnail"><a class="fancybox" rel="group" href="Gallery/Image3.jpg"><img title="Bird Caption" src="Gallery/_t/testImage3_jpg.jpg"></a></div>
<div class="custom-caption"><a class="fancybox-button"  rel="fancybox-button" href="Gallery/testImage3.jpg">Click here to open gallery</a></div>

这是我管理fancybox属性的代码

        jQuery(".fancybox").fancybox({
        maxWidth    : 800,
        maxHeight   : 600,
        fitToView   : false,
        width       : '100%',
        height      : '100%',
        title: this.title,
        wmode: 'transparent',
        allowfullscreen   : 'true',
        allowscriptaccess : 'always',
        beforeLoad: function() {
            this.title = jQuery(this.element).find('img').attr('title');
        },
        next : {
            13 : 'left', // enter
            34 : 'up',   // page down
            39 : 'left', // right arrow
            40 : 'up'    // down arrow
        },
        prev : {
            8  : 'right',  // backspace
            33 : 'down',   // page up
            37 : 'right',  // left arrow
            38 : 'down'    // up arrow
        },
        close  : [27], // escape key

        helpers:  {
            title : {
                type : 'inside' // 'float', 'inside', 'outside' or 'over'
            },
            overlay : {
                showEarly : false
            },
            thumbs : {
                width: 50,
                height: 50
            }
        }
    });

2 个答案:

答案 0 :(得分:2)

这对我有用。你们怎么看待这个解决方案?

jQuery('.fancybox-button').click(function(){
        jQuery(this).parent().prev().find('.fancybox').trigger('click');
        return false;
    });

答案 1 :(得分:0)

编辑:感谢@JFK,我终于明白了什么是OP的问题。是的,OP的解决方案似乎没问题:)

FancyBox通过类定义fancybox激活自身。所以,你的锚标签打开fancybox窗口(div.custom-thumbnail中的那个)的原因是它有一个fancybox类。如果您为fancybox-button定义了不同的css属性,则可以在其附近添加fancybox类。或者,只需将fancybox-button更改为fancybox,就可以了。

我为你创建了一个fiddle。我改变的唯一一件事就是将“fancybox-button”类改为“fancybox”并且它有效。

通过在f​​ancybox-button类附近添加一个单独的fancybox类也可以。请参阅更新的fiddle