Tuesday, May 1st, 2007

Loupe.js: Magnifier Component

Category: Canvas, Component, Showcase

Christian Effenberger is having great fun with canvas. His latest incarnation is Loupe.js, which allows you to add a magnifier to an object on your page.

All you have to do is tell Loupe where to put it:

  1. <div>
  2. <img id="..." onLoad="initLoupe(this.id);" src="..." width="356" height="205" alt="..."/>
  3. </div>

Loupe.js Magnifier

Posted by Dion Almaer at 8:00 am
11 Comments

++++-
4.4 rating from 97 votes

11 Comments »

Comments feed TrackBack URI

Nice work…but totally pointless. I’d say a novelty feature.

Comment by nirav — May 1, 2007

Very cool.

Comment by Tiago Celestino — May 1, 2007

@narv: Actually, I’d find it useful on product oriented websites where getting an enhanced view of a product is important to the consumer making a buying decision. I saw that on another site (a shoe store I believe) where you could magnify the shoes to see all of the details of the product. This could also be very useful on real estate listing sites.

Comment by Rey Bango — May 1, 2007

I am planning to do a site for a local artist to show her paintings, since they are highly detailed this type of tool is absolutely wonderful!

Comment by James MacFarlane — May 1, 2007

An issue is that in order to support true magnification (rather than just pixellation), the image that is loaded initially must be the full-resolution version, which means wasted resources if the user doesn’t ever use the magnifier.

Another (much more involved) solution would be to associate a given image with a “tiling rule” which would allow the Loupe to figure out (like Google Maps) what sub-images to load for a given area of magnification and to do this predictively but without necessarily loading a full-res image ahead of time.

Comment by Evan — May 1, 2007

Evan: You meaan like Zoomify

Comment by Andrew Wilson — May 1, 2007

Where was this thing when the “Million Dollar Homepage” was hot?

http://www.milliondollarhomepage.com/

Comment by Todd — May 1, 2007

This looks great. The demo is not working for me. Is there something I need to do specifically?

Comment by Ashish — May 2, 2007

Amazing! That’s a very interesting feature in javascript world, even if it’s not used frecuently or can be improve I believe than this demonstrate once more that flash is not so necessary as people think

Comment by Luis — May 2, 2007

Added support for Internet Explorer 6/7 in Loupe.js 1.2

Comment by Christian Effenberger — May 10, 2007

Added support for viewpoint start and crosshair in 1.3

Comment by Christian Effenberger — August 3, 2007

Leave a comment

You must be logged in to post a comment.