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>
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.
PS. you could optionally add closeClick: true to your fancybox initialization so fancybox closes when clicking the opened image
$(".zoom").fancybox({
closeClick: true
});