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:
HTML:
4.4 rating from 92 votes
Nice work…but totally pointless. I’d say a novelty feature.
Very cool.
@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.
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!
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.
Evan: You meaan like Zoomify
Where was this thing when the “Million Dollar Homepage” was hot?
http://www.milliondollarhomepage.com/
This looks great. The demo is not working for me. Is there something I need to do specifically?
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
Added support for Internet Explorer 6/7 in Loupe.js 1.2
Added support for viewpoint start and crosshair in 1.3