Cloud-Zoom inside Fancybox
Hey there,
I like to translate this post to english, due to this awesome interest.
Today I want to blog some programming stuff, its some time ago I do that. I give my attentaion to the cowork of fanybox and cloud-zoom, booth are jQuery plugins. And to be honest it’s not that hard as it sounds. Let’s go:
Fancybox init:
$("a.gallery").fancybox({
'onComplete' : function(arg) {
// Here does the magic starts
$('#fancybox-img').wrap(
$('<a>')
.attr('href', $(arg[0]).attr('href'))
.addClass('cloud-zoom')
.attr('rel', "position: 'inside'")
);
// That's it
$('.cloud-zoom').CloudZoom();
}
});
Now deactivate the boarders in cloud-zoom.css:
/* This is the zoom window. */
.cloud-zoom-big {
/*border:4px solid #ccc;*/
overflow:hidden;
}
Thats it. Have fun!
You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
Hey,
Great workaround for plugging CloudZoom inside FancyBox.
One question though, the navigation buttons in FancyBox completely disappear after integrating CloudZoom. So I can’t move from one image to another in a gallery. Also, the keyboard doesn’t work either.
Any way to fix this?
Thanks in advance.
P.S. And happy holidays
Hey coolcopy,
While I was trying around with this, I also noticed that, but I don’t needed that feature for my project. So there was no reason for me to go on with debugging this, but if you find a way to fix this please share it with me. I will update this post.
Thanks for comment and wish you a nice holiday too
Sure, will keep you updated. In fact, I’m working on it as we speak!
Hi nesQuick,
big thanks for the code.
id added a second param “cur” to the function and replaced the “$(arg[0])” with “$(arg[cur])”.
Now you can use it with Fancybox galeries.
Hope it helps!
$("a.gallery").fancybox({
'onComplete' : function(arg, cur) {
// Here does the magic starts
$('#fancybox-img').wrap(
$('')
.attr('href', $(arg[cur]).attr('href'))
.addClass('cloud-zoom')
.attr('rel', "position: 'inside'")
);
// That's it
$('.cloud-zoom').CloudZoom();
}
});
Hey Felix,
Thank you for that addition. This might be helpful for many others here
Hello, sorry but I dont understand where I have to put this code
Can you give me more information?
Do you have a working example please?
Hi nesQuick & Felix, I’ve been trying to implement your code but am unsure as to where to place within the .js & how to call it correctly within .html. Any chance of posting more detailed instructions for us students?
Thanks
You can put it where ever you like, it’s only a modified call of the gallery. I’d suggest to put it under you gallery html in an extra script-tag.
Can someone post a working example of gallery? I’ve cant get zoom to work when fancybox pops-up the pic.
please, please help:)
@Felix: can’t seem to get your gallery mode to work with class=’gallery’ in html? I did achieve single mode with this in orig init but does not work for me as gallery using cur. Any suggestions?
Hi nesQuick & Felix, I’ve tried numerous ways to get the ‘gallery’ mode to work [prev & next arrows in fancybox] with Felix’s suggestion but can’t fathom what code the ‘cur’ function should include. Any possibility of posting the missing code? Thanks in advance
Any chance of anyone putting up a sample page where this works? I can’t seem to get it to work with my gallery page.