Question

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

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

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

我尝试为图片添加内联样式，使其在内容区域显示为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用于在fancybox中打开它而没有img标记的约束

<强> Forked PEN

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

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

Answer 2

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

更新了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

Fancybox放大相同的图像onlick

2 个答案: