Fancybox увеличить одно и тоже изображение onlick

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

Единственное, что вам нужно сделать, это добавить специальный 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