Fancybox-2 :动态更新原始元素时停止工作

Question

因此，这里是一个场景:我试图创建一个图库，其中有一个启用了Fancybox的“主”映像(带有一个.fancybox类)，在这个主图像下面是几个缩略图，点击后分别更新主<a>和<img>元素的href和src。

现在，当页面加载时，如果单击主图像，Fancybox就会触发，而不会像预期的那样引发问题。但是，当我单击下面的缩略图之一时，主图像和带有缩略图内容的链接更新--如果我现在单击主图像，它只会转到指定的URL；而不是Fancybox。

即使在交换发生之后，我要重新打电话给$('.fancybox').fancybox();；什么也没有。

无论如何，下面是代码和jsFiddle：

Fiddle

http://jsfiddle.net/sbeliv01/jRsjK/4481/

<!-- The "Main" Photo -->
<a rel="gallery" class="fancybox" href="http://fancyapps.com/fancybox/demo/1_b.jpg">
    <img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt=""/>
</a>

<!-- The thumbnails that update the main photo -->
<ul>
    <li>
        <a class="update" href="http://placekitten.com/600/300" title="This is the test title.">
            <img src="http://placekitten.com/150/150" width="45" width="45" title="This is the test title." />
        </a>
    </li>
    <li>
        <a class="update" href="http://placekitten.com/600/300" title="This is the test title.">
            <img src="http://placekitten.com/150/149" width="45" width="45" title="This is the test title." />
        </a>
    </li>
    <li>
        <a class="update" href="http://placekitten.com/600/300" title="This is the test title.">
            <img src="http://placekitten.com/g/150/150" width="45" width="45" title="This is the test." />
        </a>
    </li>
</ul>

JS

$(".fancybox").fancybox({
    live: true
});

$('.update').on('click', function(e) {

    e.preventDefault();

    var main      = $('.fancybox'),
        href      = $(this).prop('href'),
        title     = $(this).prop('title'),
        img_src   = $(this).find('img').prop('src'),
        img_title = $(this).find('img').prop('title');

    main
        .prop('title', title)
        .prop('href', href)
        .find('img')
        .prop('src', img_src)
        .prop('title', img_title);

    $(".fancybox").fancybox();

});

我可能太专注了，找不到任何显而易见的东西，所以谢谢你的帮助。

Answer 1

fancybox第一次工作的原因是，第一个链接的URL以图像为目标，例如：

http://fancyapps.com/fancybox/demo/1_b.jpg

..。而其他人则前往一个地点，例如：

http://placekitten.com/600/300

..。没有任何图像扩展。在第二个URL中，fancybox不知道要处理的内容的type，这就是为什么在新的窗口/选项卡中打开链接的原因。

您必须将内容的type强制为image，例如

$(".fancybox").fancybox({
    type : "image"
});

你其实不需要re-call the $('.fancybox').fancybox(); after the swap has taken place

请参阅小提琴