单击以在fancyBox中打开子html并链接它们

时间:2013-11-12 15:22:18

标签: jquery fancybox fancybox-2

我有这个项目,我不能将图像组合成一个复合材料,所以每个叠加层必须有2个图像。到目前为止,下面这个小提琴做了伎俩,但我不能为我的生活找出如何让后面和下一个按钮相互联系。

http://jsfiddle.net/PFVxK/1344/

HTML

<div class="image">
    <div rel="gallery1">
        <img src="http://placehold.it/300x300/B7AF90/FFFFFF&text=Before" />
        <img src="http://placehold.it/300x300/B7AF90/FFFFFF&text=After" />
        <p class="title">Title Goes Here</p>
    </div>
    <br style="clear:both;" />
</div>
<div class="image">
    <div rel="gallery1">
        <img src="http://placehold.it/300x300/B7AF90/FFFFFF&text=Before2" />
        <img src="http://placehold.it/300x300/B7AF90/FFFFFF&text=After2" />
        <p class="title">Title Goes Here</p>
    </div>
    <br style="clear:both;" />
</div>

JQuery的

$(".image").click(function () {

    $.fancybox({
        type: 'html',
        content: $(this).children().html()
    }).attr('rel', 'gallery1');

});

1 个答案:

答案 0 :(得分:2)

问题在于您使用手动方法(click)触发fancybox,因此除非您在脚本本身中设置gallery元素,否则无法以这种方式使用图库。

请尝试使用此变体:

var images = [];
$(".image").each(function(i){
    images[i] = $(this).children().html();
    $(this).on("click", function(){
        $.fancybox(images,{
            index: i,
            type: 'html'
        });
    })
});

注意 .on()需要jQuery v1.7 +

参见 JSFIDDLE