Zoom In With A jQuery Plugin

Tweet

If you want to add some “Zoom In” functionality to a web page, “Anything Zoomer” is a new free jQuery plugin from Chris Coyier of CSS-Tricks. It’s a simple concept, where you might have a small image or some small text, you roll your mouse over an area and the image or text is magnified, giving you a closer look.

From the creator:

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 example below you can see the small zoomed-in area above the original small image.

image-demo

As well as working with images and text, the plugin allows you to zoom in on other elements, for example a calendar.
calendar-demo

Although the zoom works beautifully and appears to be a simple concept, there are five parts involved in creating a zoomable area.

  • The Wrap – goes around everything.
  • Small Area – the default viewable area, that you mouse over to zoom.
  • Large – the content to be viewable through the zoomer.
  • Overlay – the zooming box that follows the mouse around.
  • Mover – a wrap for the large area and overlay.

The plugin is very flexible and allows you to customize each of these parts.

Check out the working demos here.

You can download the plugin on the same page, and you’ll be pleased to know there is good support documentation, explaining exactly how to use it.

Other jQuery Zoom plugins to have a look at:

Related Reading:

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.deanclatworthy.com Dean C

    I don’t find this user-friendly at all and the practical examples provided present no benefit to me as a user. Why would anyone display text initially so small that no-one could read it, or display a calendar so small that no-one can read it.

    I even find it hard to justify a legitimate use-case for the image zoom functionality. I find it much easier to use the double-click functionality provided to make the image bigger and then use my mouse wheel to move around or the scrollbars.

    • Mark

      It’s not very effective to load the entire image if the size of the image exceeds 10 MB or so. If you load only a portion of the image with image tiles this gets interesting. jQuery has a plugin – http://www.ajax-zoom.com that can do it with the help of PHP, but the plugin is only free for non-commercial use.

  • http://www.crearedesign.co.uk TomBradshaw

    This looks really useful, thanks very much Jennifer!

  • http://xslt2processor.sourceforge.net boen_robot

    I have a concern with AnythingZoomer… the same going for FancyZoom as well. If JavaScript is turned off, your users will see both the small and the big image. That’s terrible in my opinion. In addition, I like to keep my JavaScript at the bottom of the page, and therefore, I like to minimize page “fixes” with JavaScript.

    In this regard, I like more the approach of jqZoom. With it, if JavaScript is disabled, you get a plain link to the big image.

    The only thing all zoomers (unfortunatly) appear to miss is the more complicated case of big images that should be loaded in parts. I don’t recall any zoomer utility/library/plug-in that lets you specify a URL to a server (PHP, ASP.NET, etc.) file that would be queried for parts of the big image. I’ve seen some sites do it, but they have their own scripts for that, and I haven’t tried enough to reverse engineer them.

  • youngjedi

    one zoom I really like is exemplified on zemanta.com

  • Chris Coyier

    @Dean C: As the creator, I agree in general. It’s not something that would be super common to use. But just because you can’t think of a reason it would be useful doesn’t mean it’s absolutely not useful and nobody in the world will ever find it such. The interwebs are a big place.

    @boen_robot: In the case of this plugin, if you turn JavaScript off, you don’t get both, you just get the small version. This is because layouts are more likely to be based off the small versions size.

  • http://xslt2processor.sourceforge.net boen_robot

    @Chris Coyier
    How come? The “basic markup” example shows:
    <div id="wrap">

    <div id="small">
    <img src="images/rushmore_small.jpg" alt="small rushmore" />
    </div>

    <div id="mover">
    <div id="overlay-thing"></div>

    <div id="large">
    <img src="images/rushmore.jpg" alt="big rushmore" />
    </div>
    </div>

    </div>
    And the CSS part doesn’t include any “display:none;” (though I suppose I could add that)… how is that hidden? Also, how about mobile browsers, where JavaScript and CSS may not be available, or lacking “display:none;”? What if the CSS and/or JavaScript file simply fails to load (belive me… I’ve had THAT happen to me on a desktop computer a few times, so when I create sites, I do think about it…)?

    I just really don’t like keeping my large version together with my small version, that’s all.

  • Chris Coyier

    The “large” area is a part of the “mover”, which does have display: hidden in the CSS by default.

    It’s just a plugin… so figuring out how you want it to degrade will depend on what kind of circumstance you are in. It’s hard to guess, as I realize the need for this kind of thing is rare and the circumstances rather bizarre to begin with. For now, degrading to just showing the small area seems reasonable to me.

  • flyspirit

    This is really cool, thanks Jennifer

  • http://www.digitalidiom.co.uk/web_design_services.php decook

    I came across this only a few days ago on a Pearls and Jewellery web site: Which I think is a good use of the zoom feature. Some may argue it’s not essential, however I think is this case (selling on-line) does help most users (accessibility issues as per normal though).

    I think I’ll be using this at some stage for my ecommerce sites.

  • http://www.words2content.com/index.html orebaba

    Chris,

    Thanks for the zoom-in. I just made a short video on it

    I’ve 2 issues:

    Is it possible to stop the double-clicking that allows to view ‘large area’?

    2
    In IE6 after the double-click brings the large area, it does not contract to small area when I double-click again.

    Thanks again.

    Partha