ImageInspector: An Image Zoom & Pan Component

05.11.2010

This type of component is becoming quite popular these days and for good reason: it makes it extremely easy to quickly zoom in and pan around an image. I imagine most all of us have seen an example of this but I’ve never found the code for one that suits my fancy. So here you go. Here are some possibly unique features I wanted and implemented along with the usual goodies:

ImageInspector works with images of any aspect ratio. Also, you’ll notice the picture-in-picture will size itself to the aspect ratio of the image. Just set maxWidth and maxHeight and it won’t get larger than those dimensional limits.

The focal point is maintained during scaling. For example, zoom in, move the focal point to the corner of the image, zoom out, then zoom in. Notice that, as you zoom out and in, the focal point is maintained as much as possible.

The focal point and relative scale are both maintained during resizing. For example, if an image inside ImageInspector is at 200% of its “fit” size, ImageInspector is 100% width and height of the window, and the user starts making the window larger, ImageInspector will continue to scale up the image inside it, attempting to keep it at 200% of its “fit” size. Likewise, the focal point will be maintained while resizing the window as well.

Right-click the demo app to view the source. The app might take a little while to load because it contains two embedded high-res images.

Tags: , , , , , , ,


Comments

05.12.2010 / Nate Ross said:

Very cool! One feature that would make this even awesomer would be if you could drag on the large image to have it pan instead of just being able to pan on the small image.

05.12.2010 / Aaron Hardy said:

For realz. Now on my to-do list.

05.12.2010 / Jason Case said:

I love this. I like that it is now available for me to use and i don’t have to spend the time coding it lol. I agree with Nate. When I first loaded it I tried dragging around the main image. it would be awesome if you could do either action to make it work. nice job!

05.21.2010 / casey! said:

Its a nice piece of code. Don’t listen to the haters ^ ^ ^ ^ (that’s the problem with free stuff, peeps are never satisfied)

Is that a headphone jack above the astronauts hand on his shoulder? (see it?) I’d like to plug into that jack and listen to some SPACE BEATS!

09.12.2012 / Ketan Thakkar said:

Will it work for the images loaded the swf files.
I mean I want to use this component to zoom the images which have source of swf files. but this component is not working for that kind of images

03.13.2015 / Hiren Parekh said:

in this component if the image size is smaller than the component the image is scaled to fit in to the component. my question is is there any way to stop this.
in my case the Image Inspector component size is 500×500 and the image size is only 50×50 so when i load the image in it already get zoomed to 10x.
if the image is small than it should be displayed in the center with original size.


Leave a Comment

Your email address is required but will not be published.




Comment