A Big Image Embed Applet
Put big images in small places.
A wide panorama of Hong Kong, centered:
A tall giraffe, positioned at the top:
Click to engage/disengage. Scroll to zoom. Double-click to reset.
Paste the URL to your image in the Image URL input. Make sure it's legit and works by first trying to load it in your browser. It ought to look something like .
Next, select the size of the embed you want. The dropdown has a handful of default options, or you can select "Custom" to specify your own dimensions.
By default, images will place themselves in the center. If you've got one whose emphasis is in a different direction (top, right, bottom, left) click the Options dropdown and change the Default Position.
The obvious dilemma here is that images are served up in their default resolution and any manipulation is done superficially by your browser. A 3mb image will load as 3mb. This may not be a problem for you, but it is something to consider.
In other words, properly compress your images and size them down to the highest resolution you think your users may care to see.
Graceful-ish Degradation and Browser Support
Tested and working in Firefox, Safari, Chrome, and IE6+, using Windows and OSX (where applicable).
Code, Bits, and Cogs
Appreciative nods to Google's Ajax APIs and Font Directory and Cached Commons.
Roadmap Features Possibly
- UI or on-hover instructions
- More precise default position and default zoom settings
- Image upload service integration