javascript - Fancybox 放大同一张图片 onclick

Question

在页面的内容区域，我必须放置一些图片，当用户点击图片时，它会使用 fancybox 放大图片。

如果图片很大，那么用户可以点击图片，它应该在花式框中显示放大的图片。

而且我必须使用与缩略图和大版本相同的图像。

我尝试为图像添加内联样式，使其在内容区域显示为 200px，并在单击图像时放大。但它并没有发挥作用，它仍然在花式框中以相同的在线尺寸显示图像。

<div class="wrapper">


  <p><img src="http://farm4.staticflickr.com/3864/14420515212_9999c800b4_b.jpg" style="float:right; padding:5px; width:200px;" class="zoom"><p>

Vivamus nisi neque, finibus quis ex et, lacinia aliquam ipsum. Nullam ut malesuada nulla, vel pulvinar arcu. Nulla accumsan dolor sed faucibus accumsan. Aliquam non nulla lectus. Sed</p>
</div>

http://codepen.io/anon/pen/ZQmrOb

Answer 1

您唯一需要做的就是将特殊的 data-fancybox-href 属性添加到您的 img 标签中，例如:

<img data-fancybox-href="http://farm4.staticflickr.com/3864/14420515212_9999c800b4_b.jpg" src="http://farm4.staticflickr.com/3864/14420515212_9999c800b4_b.jpg" style="float:right; padding:5px; width:200px;" class="zoom" />

请注意，src 和 data-fancybox-href 这两个属性都指向同一张图片，但是 data-fancybox-href 是用于在没有 img 标签约束的情况下在 fancybox 中打开它。

Forked PEN

附言。您可以选择将 closeClick: true 添加到您的 fancybox 初始化中，以便 fancybox 在单击打开的图像时关闭

$(".zoom").fancybox({
    closeClick: true
});