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

Question

我有这个项目，我无法将图像组合成一个复合材料，所以我必须在一个叠加层中有 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');

});

Answer 1

问题是您使用手动方法 ( click) 触发了 fancybox，因此除非您在脚本本身中设置画廊元素，否则您无法以这种方式拥有画廊。

试试这个变体：

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