javascript - Fancybox单击放大相同图像(Fancybox enlarge same image onclick)

Question

In content area of the page I have to place few images and when user click on the image it enlarges the image using fancybox.(在页面的内容区域中，我必须放置一些图像，当用户单击图像时，它会使用fancybox放大图像。)

If image is large then then user can click on the image & it should show the image in fancy box as enlarged.(如果图像较大，则用户可以单击图像，并且应该在花式框中将图像放大显示。) and I have to use same image as thumbnail and large version.(而且我必须使用与缩略图和大版本相同的图像。) I tried to add inline style for image so that it show as 200px in content area and enlarged when clicked on image.(我尝试为图像添加内联样式，以使其在内容区域中显示为200px，并在单击图像时放大。) But it is not taking the effect it still keeps showing image in same online dimension in fancy box.(但是它没有发挥作用，它仍然在花哨的盒子中以相同的在线尺寸显示图像。) <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(http://codepen.io/anon/pen/ZQmrOb)   ask by Learning translate from so

Answer 1

The only thing you have to do is to add the special data-fancybox-href attribute to your img tag like:(您唯一要做的就是将特殊的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" /> Notice that both attributes, src and data-fancybox-href are pointing to the same image, but data-fancybox-href is used to open it in fancybox without the constrains of the img tag.(注意，两个属性src和data-fancybox-href都指向同一图像，但是data-fancybox-href用于在fancybox中打开它，而不受img标签的约束。) Forked PEN(分叉笔) PS.(PS。) you could optionally add closeClick: true to your fancybox initialization so fancybox closes when clicking the opened image(您可以选择将closeClick: true添加到fancybox初始化中，以便在单击打开的图像时fancybox关闭) $(".zoom").fancybox({ closeClick: true });