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.
Brilliant! Thanks Steve, this just made my day :)
Great work, using the prototype version at work, was looking forward to the JQuery version. Thanks
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!
Yay! This is real development at work. :D Thanks guys for putting this out so quickly!
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!
This has already been done, though, and perhaps more comprehensively: http://fancy.klade.lv/
Awesome! Great work, Steve!
Sweet, liking the addition of the click-behavior suggestions from yesterday. Definitely saving this for later.
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!
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?
Really, awesome great job. Thank you.
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.
Thank you. I have tried other takes on this but seems like this one is more optimized
Being more of a jQuery kinda guy this is brilliant! Thankyou.
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.
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.
@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.
well done !
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!
You are a genius!
What license is this script released under?
Very neat. I’ve added this to the Lightbox Clones Matrix
Great, I have been looking for this Bravo!
Being a huge jQuery fan, I really love this! I’d also second the suggestion for some kind of PREV/NEXT browsing capability.
Nice.
great work, thanks !
Nice …
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.
Great work !
Can this be triggered from inside a flash movie?
Nice plugin Steve, this will help me out big time.
Thank you so much!
Great work Steve. The transition is really smooth. Awesome! We really appreciate you taking the time to refactor it for jQuery.
Rey – jQuery Project
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.
@Matt – “Bug” or “Feature”. That is the question. :)
mbvcpywkoiufbhsbemuqbkbqyaqrei
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
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.
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.
IE7 is capable of handling PNG transparency, so you should only give the gifs to IE6 and older.
This is what i have been looking for a looong time :)
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.
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 :)
Aweome! thanks a bunch, this is great.
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?
Wow, jquery! I’m using the original FancyZoom, but I’ll switch to this in a hurry.
Thanks!
Really nice thing going on here. I like it a lot and it’s totally going in to my next project.
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…).
Oh, now I see on the todo list that ajax is not in yet. Hrmmms back to mootools for now :(
Sexiest Fancy Box! I don’t care about ajax, but I really would love to see iframe support! Thanks.
I just started using this on my portfolio site and it’s fantastic. Thanks so much!
Thanks man! Nice article…
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?
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?
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
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
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
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)