6

I've got this user interface idea in mind for my dashboard app, and I swear I've seen it before but cannot find an instance of it on the web.

The essence is that you present a thumbnail image to the user and when their mouse hovers over the thumbnail, you overlay the actual image at 100% zoom in a large viewport.

That's nothing special, however, what do you do if the 100% zoomed image is too big to fit in the viewport? Well, you would apply the same concept used in photo editing software for yonks: as the user moves their mouse around the bounds of the thumbnail, you move the 100% zoomed viewport in the same way.

I think it's a good idea as there are no mouse clicks necessary, and in my head at least, it would feel as smooth as panning on the iPad.

I'm looking for some examples of this but have been unsuccessful. The closest match I've found is at this online retailer's site: koyono.com. As you hover your mouse over the the image on the left, a zoomed version is shown with a restricted viewport, and the viewport moves in relation to your mouse hovering over the original image.

Anyone got an example from a website or software? In particular one where the zoomed viewport is displayed over the top of the original thumbnail, as I would prefer to use as much of the user's screen as possible to show the 100% zoom viewport (I won't have direct control over where the thumbnails are layed out on the dashboard).

|improve this question
  • 2
    Please, please, please, when you implement these kinds of effects on hover also implement a suitable delay. Many instances of those "super menu's" don't have it. There is nothing more annoying than all these flashes of effects when you are just moving your mouse over a site... – Marjan Venema Jul 31 '11 at 7:27
  • @Marjan That's a good point. It also makes a 'thumbnail viewer'-type app even more usable, because you don't have the zoomed image obstructing you if your mouse is not yet at the target thumbnail. Google Images does this well. – Yoshi Jul 31 '11 at 10:30
6

Yes - I've seen this here at Bravissimo.com It's actually got a very slick feel to it.

There is a jquery plugin called cloud zoom from Professor cloud - You want the inner zoom option. This is what the website above is using.

|improve this answer
  • Thanks. The 'inner zoom' is pretty close to what I want, except I'll probably expand the viewport when the user hovers over, and when they leave the original thumbnail bounds, I'll make the expanded viewport disappear. – Yoshi Jul 31 '11 at 4:03
1

http://www.visual-blast.com/javascript/jqzoom-22-jquery-image-zoom-tool/

This is one of the best zooming tools I've seen. It works smooth as it is jQuery and is not heavy performed. I think zooming window position is customisable.

I hope it works fine for you.

|improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.