The jQuery Magnifier

UPDATE: It looks like the old Magnifier is no longer part of the jQuery UI library.  I'm looking into possible replacements, but most that I've found degrade horribly if you don't have JavaScript enabled.  If you know of a good Magnifier/Dock, please leave me a note in the comments section of this page or drop me a line.  Thanks.

The more I use jQuery, the more I like it! Until now, I'd limited my use of effects (eye candy) to some basic fades. On a new website I'm working on, the designer wants more pizazz so I've been playing with some of the jQuery UI tools, namely the Magnifier which produces a fisheye lens effect similar to Apple's Dock (OS X or later). In short, a line of icons is magnified, as if a fisheye lens were passing over it, as the user moves their mouse near the icons. Beyond looking cool, the effect is a bonus for usability -- at least for the average user.

Designers can now put more icons into the same space without worrying about icons being too small and users not understanding them. As users hover over the toolbar, the images grow making them easier to see and creating a larger click zone. Granted, this requires using a mouse. In fact, you can only use the Magnifier on images, not links, making your page even harder to deal with for some folks not to mention search engine spiders. However, for a photographer's portfolio website, we were willing to assume most users would be mousing and not keyboarding or screen-reading the page. And submitting a sitemap to the major search engines can be additional work, but it can get past the no-link limitation. I'll update this page as things move along...

Update 1:

Make sure you start the Magnifier after the images are in the final location. For example, if you had HTML like this:

<div id="wrapper">
  <div id="content">
    <p>This is content</p>
  </div>
  <div id="menu">
    <img width="48" align="left" alt="" src="http://dev.jquery.com/view/tags/ui/1.0.1a/demos/images/clock.png" />
    <img width="48" align="left" alt="" src="http://dev.jquery.com/view/tags/ui/1.0.1a/demos/images/clock.png" />
    <img width="48" align="left" alt="" src="http://dev.jquery.com/view/tags/ui/1.0.1a/demos/images/clock.png" />
  </div>
</div>

CSS like this:

#everything {
  width: 850px; 
  margin: 0 auto; 
  position: relative; 
  display: none; 
} 
#menu {
  position: absolute; 
  top: 10px; left: 0;
  width: 50px; 
}
#content {
  margin-left: 50px;
  width: 800px;
}

And JavaScript like this:

$( document ).ready( function(){
  $( "#everything" ).show( 500 );
  $( "#menu" ).magnifier();
});

The result would be this. Hovering in the middle of the screen gives you the Magnifier effect. Why? Because that's where the images were when magnifier() was called. Calling show( 500 ) causes <div id="wrapper"></div> to slide into place over half a second (500 milliseconds). To fix this, you need to wait until the slide effect has finished before calling magnifier():

$( document ).ready( function() {
  $( "#everything" ).show( 500, function() {
    $( "#menu" ).magnifier();
  });
});

Which gives you what you'd expect.