Question

所以，这就是场景：我试图建立一个有着“主要”的画廊。启用了Fancybox的图片（类为.fancybox）且此主图片下方是一些缩略图，点击后会更新主href和src }和<a>元素。

现在，当页面加载时，如果单击主图像，Fancybox将按预期触发。但是，当我单击下面的缩略图之一时，主图像和链接会更新缩略图内容 - 如果我现在单击主图像，它将转到指定的URL;没有Fancybox。

即使在交换发生后我要重新调用<img>;什么都没有。

无论如何，这里是代码和jsFiddle：

小提琴

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

HTML

$('.fancybox').fancybox();

JS

<!-- 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>

我可能过于专注于拾取任何明显的东西，所以感谢任何帮助。

Answer 1

fancybox第一次工作的原因是，第一个链接的URL定位图像，例如：

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

...而其他人到位置，例如：

http://placekitten.com/600/300

...没有任何图像扩展名。在第二个网址中，fancybox不知道要处理的内容type，这就是链接在新窗口/标签页中打开的原因。

您必须强制type内容 image

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

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

参见 jsfiddle

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

1 个答案: