AnythingZoomer jQuery Plugin
You have a small area. You mouse over it. An area pops up giving you a zoomed in closer look. This is a jQuery plugin that does it. I’m not going to tell you what you should use it for or elaborate use-case scenarios. Your own creativity can help you there.
It’s flexible in many ways, in that the “small”, “large”, and “zoom” areas are all pretty easy to customize (via CSS). It’s inflexible in other ways, in that it doesn’t “automatically” work by cloning content or anything like that (which is arguably more flexible), and the HTML structure is fairly rigid.
In the emerging custom of jQuery plugins that benefit from demos, I’ve put several demos and the documentation for it all in one place.
We can keep the comments/discussion here though. So if anyone has any ideas for how to make it better/smarter/cooler, let me know!
It’s a truly nifty thing, but the thing that makes me most excited about it is your excellent, excellent documentation! Usually with jQuery plugins you get something truly cryptic, especially if you’re hunting for parameters.
This is so cool! The only thing I noticed is that it changes the colors on the third calendar, was that on purpose?
Thanks for this!!
This is a really nice implementation of zoom. I love the fact it is unobtrusive and can be integrated i not a site so easily.
What would be nice, if this is at all possible, is to have the ability to click on zoomed in links?
Great work Chris :)
That was exactly what I needed! Thanks!
“We can keep the comments/discussion here though. So if anyone has any ideas for how to make it better/smarter/cooler, let me know!”
I did something like that in Flash (..yes I know it hasn’t to do with jquarry and everbody here hates flash..I know) but just to give you (and the others) an Idea how that looks like in flash (click on the Image, will bring a magnify-glass kind of effect with dropshadow and inner white glow..just to mimic some “real” thing! :))
http://www.musca-design.de/test/lupe/Untitled-1.html
You are voted!
Track back from WebDevVote.com
Create it using MooTools.
boooo
Wouldn’t be that hard. Tbh.
David, you are plenty good at Mootools, why don’t you just make it?
Looks pretty cool… may be I can use it in something innovative some day :P but have to think of something that innovative first lol.. thanks throwing light on this plug-in Chris :)
Excellent plugin, thanks!
Hi Chris,
Great Work, is their a chance you could create a screencast on how you made it.
I know I could just look at the code but screencasts are a lot more interesting and easier to understand.
Thanks : )
could’t agree more…
Nice lil toy ^^ !
Great implementation of JQuery. Not sure exactly when I will use this but, I’m pretty sure at some stage I will. It’s little touches like this which can can look very impressive on a website.
More like this definitely. Thanks.
This kind of user interface functionality is very nasty. It doesn’t add anything to the experience and is always an annoyance to use. What’s the point in it? It doesn’t feel nice to use. Remove this blog post right now and i’ll forgive you. :-)
Atleast try to show some appreciation for someone’s hard work This is. Chris’s website and he’s doing this stuff for the community. If you dont like it, go AWAY.
That was a pretty good burn
Yes. I’m going to agree Chris on this one. When would this ever be both truly needed and not annoying at the same time?
Nice effect and kinda trendy too. Thanx for the plugin. :)
What can I say, I couldn’t have come up with this myself. Thanks
This is really cool!
Nice work Chris,
What I like about this plugin is that if you zoom your browser (like I always do) The zoom functionality does not go of the target (Like so many other Jquery zoom plugins)
Great stuff!
A client just asked me for ‘zoom’ functionality for his site,, I was racking my brain trying to figure out how I could do this exact same thing. Turns out he just wanted a refreshed page with the larger image. LoL Chris your a bloomin saint i’ll try this out and probably use it somewhere~ thanx
Clever stuff, but a bit glitchy.
This stuff would be ideal for someone looking to design a “Where’s Waldo?” type of game.
check out this plugin from ThemeForest by James Padosely: Zoomer
really nice and pretty similar. not free though ;)
thanx Chris!
nice broo good work
I could see using this on a site where there are known issues when the site is re-sized. Like when you know that there are a lot of people coming to your site with visual impairments.
Instead of making the site have multiple CSS docs and puting the “a,A, A” (that last A is supposed to be really bi) in the top right – you could put a button there indicating this feature. When the user click, they could magnify where ever there mouse is on the site. If you did that, you’d have to make the magnified box bigger though… maybe like as wide as the site.
Anyway, it’s fantastic.
You have to put the text TWO TIMES in the markup to make him anythingzoomable, one time inside a div with id “small” and a second time inside a div with the id “large”. This is not good.
Helen, you can put the text only once, then use the jQuery clone function.
Then it’s good!
I understand the concern. Cloning would avoid the double markup, but at the cost of flexibility. See the calender demo as an example, where the zoomed in area is actually DIFFERENT markup creating a sort-of-cool affect. I guess in a perfect world the plugin would offer a choice of “provide your own large area” or to clone.
… Or clone, and apply different stylesheets to “small” and “large”.
Wow! thanks Chris!
Nice work, and very useful in my opinion. One issue I have is that the large div doesn’t align with the small div. I also see this issue in your demo.
To expand on this, it would be nice to have more explanations about what expansionSize and speedMultiplier do.
It would be interesting to see something like this addressed from a usability/AAA standpoint. We did a website at work for Braille Institute which was required to be AAA compliant due to it being a site for the visually impaired. Something like this is a lot more elegant than scaling text on a page.
Nice plugin :).
It would be much better if the zoom was in the form of a circle instead of square IMO.
Great functionality but I’m wondering in what scenario would this functionality be useful in!? Anyone got any ideas!?
Awesome plugin Chris. Very nice work. Having a similar issue to others with the Zoom box not being aligned with where the mouse is pointing, but apart from that, it’s excellent!
If anyone comes up with a fix for this, I’d love to hear it. Similarly if I hit on one, I’ll be back. I suspect it’s a simple css property prob.
@ all those wondering what this could be used for:
Duh! This would be a good, non obtrusive way of showing the user more of a Product on transactional sites. Yoox.com use a similar idea, although theirs is slow and boring, except in the Lingerie department ;)
Hi hows it going?
I’m looking for just what you’ve written except I need the display box to be approx 4″s by 21/2″s and increase the font to 48
Is there anyway it could be an add on for Microsoft word?
please reply to my email
thank you for your time
Peter