Grow your CSS skills. Land your dream job.

AnythingZoomer jQuery Plugin

Published by Chris Coyier

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.

See Demos & Download

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!

Aug 30 2011 - This demo has been plugin-ized by Mottie. I'm going to keep a live demo on this site (current as of this update) but the latest and greatest should be gotten from the GitHub repo.

Comments

  1. Permalink to comment#

    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.

  2. 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!!

  3. 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 :)

  4. That was exactly what I needed! Thanks!

  5. Permalink to comment#

    “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

  6. You are voted!
    Track back from WebDevVote.com

  7. Create it using MooTools.

  8. 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 :)

  9. Excellent plugin, thanks!

  10. Jay
    Permalink to comment#

    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 : )

  11. Vincent Ouellet
    Permalink to comment#

    Nice lil toy ^^ !

  12. 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.

  13. Chris
    Permalink to comment#

    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

    • andrew
      Permalink to comment#

      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?

  14. Nice effect and kinda trendy too. Thanx for the plugin. :)

  15. What can I say, I couldn’t have come up with this myself. Thanks

  16. Permalink to comment#

    This is really cool!

  17. Josh
    Permalink to comment#

    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!

  18. 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

  19. Matt
    Permalink to comment#

    Clever stuff, but a bit glitchy.
    This stuff would be ideal for someone looking to design a “Where’s Waldo?” type of game.

  20. daniel
    Permalink to comment#

    check out this plugin from ThemeForest by James Padosely: Zoomer
    really nice and pretty similar. not free though ;)
    thanx Chris!

  21. nice broo good work

  22. 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.

  23. Helen
    Permalink to comment#

    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.

    • Helen
      Permalink to comment#

      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”.

  24. Jose
    Permalink to comment#

    Wow! thanks Chris!

  25. 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.

  26. Permalink to comment#

    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.

  27. paul
    Permalink to comment#

    Nice plugin :).
    It would be much better if the zoom was in the form of a circle instead of square IMO.

  28. Great functionality but I’m wondering in what scenario would this functionality be useful in!? Anyone got any ideas!?

  29. Permalink to comment#

    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 ;)

  30. Peter S
    Permalink to comment#

    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

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".