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

这是更新后的版本。它根据您的要求工作。

已更新HTML

<a class="fancy-trigger" href="http://farm4.staticflickr.com/3864/14420515212_9999c800b4_b.jpg">
    <img src="http://farm4.staticflickr.com/3864/14420515212_9999c800b4_b.jpg" style="" class="zoom">
</a>

Working Demo

Answer 2

您唯一需要做的就是将特殊的 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 用于在 fancybox 中打开它而不受 [=13= 的约束] 标签。

Forked PEN

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

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

Fancybox 放大同一张图片 onclick

Fancybox enlarge same image onclick

javascript

css

jquery

fancybox

fancybox-2