Implementing zoom inside fancybox

Question

I have a magazine on my site with the following markup:

<a class="fancybox" rel="group" href="http://fashion.megamall.ru/images/2012/journal/big/journal_02-03.jpg"><img     src="http://fashion.megamall.ru/images/2012/journal/small/journal_02-03.jpg"></a>
<a class="fancybox" rel="group" href="http://fashion.megamall.ru/images/2012/journal/big/journal_04-05.jpg"><img src="http://fashion.megamall.ru/images/2012/journal/small/journal_04-05.jpg"></a>
<a class="fancybox" rel="group" href="http://fashion.megamall.ru/images/2012/journal/big/journal_06-07.jpg"><img src="http://fashion.megamall.ru/images/2012/journal/small/journal_06-07.jpg"></a>

I am using fancybox to create a... lightbox-like preview with thumbnails. But because my initial magazine pages are quite big, the fancybox resizes them to fit into the viewport thus they're not readable. What I would like to do is to add some zoom functionality to the fancybox. I've found a thread here on Stachoverflow Adding zoom to Fancybox where someone tries to achive the same result using jqzoom. I've tried to implement the suggested solution but it does not seem to work.

Could you please help me with this task? Maybe I need to launch fancybox content from other place and not from this very page? But I still need the images list in my HTML because they're used to show the magazine outside the fancybox.

Here's my website:

http://fashion.megamall.ru/journal

Thank you!

Answer 1

Update from 2017 - fancybox3 now supports zooming by click on desktop & pinch gestures on touch devices.

The documentation is here: http://fancyapps.com/fancybox/3/docs/#options

Please note the script is totally different & the options have been updated, so it isn't a drop-in replacement for fancybox 2.

Answer 2

If you use fancybox v2.x, add the buttons option to your script and it includes the zoom feature you are looking for.

Check http://fancyapps.com/fancybox/demo/ (look for "button helper").