Adding zoom to Fancybox

Question

I'm using Fancybox for my thumbnail gallery. I'd like to use JQZoom ( http://www.mind-projects.it/projects/jqzoom/ )with the fancybox as well.

The end result: 1. User clicks on thumbnail 2.fancybox appears with larger image 3. User can mouse over image to zoom in more using JQZoom

Right now I have it set up to do this effect. The fancybox works perfectly, but the JQZoom doesn't work at all. I haven't encountered any errors using firebug either.

Here's the page :

http://waldondigital.com/mix/gallery.html

Here's my jquery:

http://pastebin.com/3Nc9pzMM

Thanks for your time, it's greatly appreciated.

Answer 1

This should do the trick: http://pastebin.com/mg7e0Z1S

It basically adds the zoom image as content to $.fancybox and applies $.jqzoom() when it's done via onComplete. I disabled scrolling because jqzoom seems to add a border to the smaller image, resulting in horizontal scrollbars.

FYI, I only tested this with inline zoom...

Answer 2

You would need to set up fancybox zoom to open an iframe style lightbox, that contained your JQZoom code. could be a very slick combination!