花式框放大相同的图像点击

Fancybox enlarge same image onclick

本文关键字：图像 放大      更新时间：2023-09-26

在页面的内容区域中，我必须放置一些图像，当用户单击图像时，它会使用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

您唯一需要做的就是将特殊的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 标签的限制。

分叉笔

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

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

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

更新的网页

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

工作演示

相关文章：