Fancybox放大同一图像onlick

在页面的内容区域中，我必须放置少量图像，当用户单击图像时，使用fancybox放大图像。Fancybox放大同一图像onlick

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

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

我试图添加图像的内联样式，以便它在内容区域显示为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

来源

2016-02-09 Learning

的fancybox需要一个''或明确的URL加载 – Alex

作为@Alex提到使用''时关闭。这里是更新的链接http://codepen.io/anon/pen/LGXQdQ – karan3112

@ karan3112，我不能将文本包裹在锚点中，我想使它工作在当前的html结构中。 – Learning

你要做的唯一一件事就是特殊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

PS。你可以选择添加closeClick: true到您的fancybox初始化这样的fancybox点击打开的图像

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

来源

2016-02-10 04:49:50 JFK

这里是更新的版本。它按照你的要求工作。

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

来源

2016-02-09 10:25:19

你正在包围它，我不想要的锚。 – Learning

Fancybox放大同一图像onlick

回答

相关问题