FancyZoom meet jQuery
A few days ago John posted a rewritten version of Cabel Sasser’s FancyZoom to work with Prototype and Scriptaculous. I took it upon myself to port it to jQuery, while making a few usability improvements.
FIrst off, you can visit the demo to see the effect in action. It’s nearly identical in behavior to John’s original in Prototype. But the fancyZoom effect is added in a much more jQuery-like way.
$(document).ready(function() {
$('a.zoom').fancyZoom();
});This will add the Zoom Effect to any a tag classed with zoom, and will show content relating to the id referenced in the href of the a tag.
Additions, etc.
I’ve added in a few additional usability enhancements, most of which John has included back into the Prototype version. These include:
- The zoom will close when clicking outside the zoom box area.
- Hitting the
esckey will close the zoom window. - Passing an option of
closeOnClick: trueinto thefancyZoomfunction will close the zoom when the contents are clicked as well. This works great for image galleries.
So enjoy, all you jQuery folks. Both jQuery and Prototype versions are kept in the same repository, so you can get the code and see examples at GitHub.
Post and Author Info.
Published September 04, 2008 by:
Commenting is currently off for this post.
So far there are 57 comments.
Brilliant! Thanks Steve, this just made my day :)
September 4th, 2008
Great work, using the prototype version at work, was looking forward to the JQuery version. Thanks
September 4th, 2008
Very nice, Steve! I wasn’t overly stoked on the lightbox’esque options for jQuery and ended up going with Lytebox (a self sufficient Lighbox JS clone) for my redesign. I’ll have to take this for a spin. Thanks!
September 4th, 2008
Yay! This is real development at work. :D Thanks guys for putting this out so quickly!
September 4th, 2008
Great job, Steve! I’ve been looking for a simple alternative like this. This is going to help me in quite a few things. Thanks!
September 4th, 2008
This has already been done, though, and perhaps more comprehensively: http://fancy.klade.lv/
September 4th, 2008
Awesome! Great work, Steve!
September 4th, 2008
Sweet, liking the addition of the click-behavior suggestions from yesterday. Definitely saving this for later.
September 4th, 2008
Nice work Steve and John. Glad to have a couple more options for this sort of functionality. I was never too keen on Cabel’s implementation even though I liked the visual side of things. This is the best of both!
September 4th, 2008
I would really like to be able to use your code on my page but the problem I have, is, with really big chunks of text, with no scroll bar in fancy zoom, of course the box grows and grows and grows. I came up with this really ugly hack to your code FancyZoomBox.zoom_content = $(‘zoom_content’); added FancyZoomBox.zoom_content.style.height = (‘400px’); added FancyZoomBox.zoom_content.style.overflow = (‘auto’); but as you can see with this hack I’m stuck with a 400px height and whilst I get a scroll bar for large chunks of text sometimes I want a smaller or bigger height. Is there a workaround to this?
September 5th, 2008
Really, awesome great job. Thank you.
September 5th, 2008
Wow, looks great – really smooth!
The only thing stopping me using it for one of my websites is the lack of gallery browsing i.e. once one image is clicked rather than closing it and clicking on the next image, being able to click on the popped image for the next image.
At the end of the day though I appreciate that you decide what this plugin is going to do and make it do that well. Which it already does. I am just highlighting one thing to maybe get your brain going…
Thanks again though.
September 5th, 2008
Thank you. I have tried other takes on this but seems like this one is more optimized
September 5th, 2008
Being more of a jQuery kinda guy this is brilliant! Thankyou.
September 5th, 2008
That’s very cool, but I do have a question: how is this different from the existing FancyBox plugin? http://fancy.klade.lv/
And I’m not being facetious, I really do want to know which is better and why.
September 5th, 2008
This is very nice! I really like the implementation of it. The only suggestion I have is that it needs to automatically take in to account the jquery.noConflict issue. I have jquery on a site that also uses prototype/scriptaculous on some pages and need to use noConflict to get around that. I had to add all of my declarations manually to the zoom.js file.
September 5th, 2008
@matthew: Gallery browsing isn’t a priority, as far as next, previous images.
@Matt Wilcox: This one feels a little better to me graphically, as well as has a smaller footprint.
@Ryan: Yes, that’s a good idea. I’ll work on getting that in place.
September 5th, 2008
well done !
September 5th, 2008
Steve, Thanks for this. We’ve been having a few bugs with the original Fancy Zoom on Blue Flavor’s site and we’re using jQuery for a few other javascript things. Hopefully this will fix ‘em!
September 5th, 2008
You are a genius!
September 5th, 2008
What license is this script released under?
September 5th, 2008
Very neat. I’ve added this to the Lightbox Clones Matrix
September 5th, 2008
Great, I have been looking for this Bravo!
September 5th, 2008
Being a huge jQuery fan, I really love this! I’d also second the suggestion for some kind of PREV/NEXT browsing capability.
September 5th, 2008
Nice.
September 5th, 2008
great work, thanks !
September 5th, 2008
Nice ...
September 5th, 2008
Very nice! The plugin looks great and the only thing stopping me from using it is the ajax issue. Hope that part isn’t too hard to fix.
September 6th, 2008
Great work !
Can this be triggered from inside a flash movie?
September 6th, 2008
Nice plugin Steve, this will help me out big time.
September 7th, 2008
Thank you so much!
September 7th, 2008
Great work Steve. The transition is really smooth. Awesome! We really appreciate you taking the time to refactor it for jQuery.
Rey – jQuery Project
September 7th, 2008
Not really a bug, but just something I noticed was that in FF3, on the Prototype demo, clicking on the ‘large box’ and ‘embed flash’ links cause the three images above to * shake * one time. In the jQuery version, just the ‘embed flash’ link causes the same shake. Interesting, that’s all.
September 8th, 2008
@Matt – “Bug” or “Feature”. That is the question. :)
September 9th, 2008
mbvcpywkoiufbhsbemuqbkbqyaqrei
September 10th, 2008
Yes, I agree with the others. Since it’s been done for a while back, I think for this to really be a player in this arena, a few things could be added: 1.) Prev/Next ‘gallery’ functionality 2.) And handle the major gripe with EVERY lightbox clone out there by making the prev/next buttons visible in the bottom bar. NOT when the user rolls over the image. That feature is not intuitive, yet all devs have been imitating that aspect of the original lightbox.
I do like the UI of this one over the http://fancy.klade.lv version
September 10th, 2008
Minor bug, when anchors use an absolute path possibly because a base href is used (for example href=”/articles/fancyzoom-meet-jquery#post_info”), this breaks the FancyZoom functionality. A wee bit of string tidying when taking the href should help things along though.
September 10th, 2008
why don’t you use [div id=”...” style=”display:none;”]. That way if the page is loading, it won’t display the images in the enlarge divs at first before hiding them. Nice scripting though.
September 11th, 2008
IE7 is capable of handling PNG transparency, so you should only give the gifs to IE6 and older.
September 11th, 2008
This is what i have been looking for a looong time :)
September 11th, 2008
Thats a fairly good effort, but this was already ported to jquery by another guy can’t remember the url at the moment. I customised my own version to use on the honda euro website. http://euro.honda.com.au/optional-extras.aspx this is alot smoother in ie6 than your version and the transparent png shadows works in ie6 aswell.
September 12th, 2008
Ryan, if you care to read the comments above your own, you’ll notice the other guys plugin linked two places ;) My experience with the other plugin is that it has some bugs and doesn’t seem as well organized as this one. Though I am waiting for the “load picture by url”-feature :)
September 13th, 2008
Aweome! thanks a bunch, this is great.
September 13th, 2008
Do you really have to put the actual Full size image in the page on display none? That seems a stupid waste of sever load. Can it not load the image from a dir?
September 15th, 2008
Wow, jquery! I’m using the original FancyZoom, but I’ll switch to this in a hurry. Thanks!
September 16th, 2008
Really nice thing going on here. I like it a lot and it’s totally going in to my next project.
September 16th, 2008
What would be the change to the code to allow HOVERING over a Thumbanial to see the BIG photo? (instead of having to click a Thumbnail…).
September 16th, 2008
Oh, now I see on the todo list that ajax is not in yet. Hrmmms back to mootools for now :(
September 16th, 2008
Sexiest Fancy Box! I don’t care about ajax, but I really would love to see iframe support! Thanks.
September 16th, 2008
I just started using this on my portfolio site and it’s fantastic. Thanks so much!
September 17th, 2008
Thanks man! Nice article…
September 18th, 2008
Thanks, the animation is really nice and smooth. It’s lightweight and would be a good starting point to add some other features. What license is this being released under?
September 18th, 2008
If I may add to the list of feature requests – I’d like to see the popup image remain centered (vertically and horizontally) when the browser window is resized or scrolled. Also, I briefly looked at the code and it seems like the drop shadow isn’t optional?
September 27th, 2008
Hey Steve, thanks for the great script. It should come handy. I love how you both develop for both, the jQuery and the prototype fans.. :D
September 29th, 2008
Having trouble with the image-popup being behind other elements? Etc. when other scripts like this http://malsup.com/jquery/cycle/ are in use.
Try this:
fancyzoom.js line 10:
div id=”zoom” style=”display:none;”
edit to:
div id=”zoom” style=”display:none; position: relative; z-index: 900;”
Hope this will help you :) It worked for me
September 30th, 2008
Steve I intend for a zoomed box to show a contact form. I would love it if when the contact form has been completed the box just closed itself. What would I have to pass to fancyoom.js for this to happen?
Thanks M
October 3rd, 2008
It doesn’t work in IE at all?!
Even the demos linked at the top of this page don’t work for me in IE6 or 7. The images just appear unhidden and clicking the thumb just scrolls down to them. Is it just me? (note that it works great for me in Safari, FF, and Chrome)
October 4th, 2008