Fancybox enlarge same image onclick

0
votes

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.

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

2
javascriptjquerycssfancyboxfancybox-2
fancybox requires an <a> or explicit url to load – Alex
As @Alex mentioned use an <a>. Here is the updated link codepen.io/anon/pen/LGXQdQ – karan3112
@karan3112, I cant wrap text in anchor, I want to make it work it is in the current html structure. – Learning
@Alex, Is there any other way of doing this other than using fancybox or jquery plugin or javascript – Learning
@Learning if you cannot update the current HTML structure manually, how about adding the <a> dynamically. Just a thought. codepen.io/anon/pen/OMaQBe – karan3112

2 Answers

1
votes

The only thing you have to do is to add the special data-fancybox-href attribute to your img tag like:

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

Forked PEN

PS. you could optionally add closeClick: true to your fancybox initialization so fancybox closes when clicking the opened image

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

Here is the updated version. It works according to your requirements.

Updated 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