Let me begin by saying right up front, I have not given up on Flash. Despite Adobe’s recent PR debacle which I’m sure if you’re reading this, you’re familiar with, I still love Flash and it’s still my bread and butter. When my wife wanted to put together a portfolio site to show off her fantastic photography and collage work, though, I figured it was as good a time as any to pick up some new skills. So I delved into the land of jQuery and HTML. Sort of 2001: A Javascript Odyssey.
While building the site (which still isn’t complete, but it’s coming along) I discovered I needed some sort of tool to magnify images. Now there are a lot of good jQuery zooming plugins out there, but seeing as how this was supposed to be a learning experience, I decided to write my own. You can check out the results here.
You’re welcome to use this, if you’d like (it’s available under MIT license), but here are a few caveats. First, it only works with single images that have been scaled down in the html page (the ‘magnified’ image is actually the size of the original image). Second, the image must be fully loaded (so that it has width, height, and src properties) and correctly positioned (so that its offset property is not simply {0, 0}). To use it, just say:
$(someImageSelector).magnify(originalImageWidth, originalImageHeight, optionsObject);
The optionsObject may contain the following properties:
- width the width of the ‘magnifying glass’ defaults to 200
- height the height of the ‘magnifying glass’ defaults to 200
- useBorder a boolean that determines whether or not to display a border around ‘magnifying glass’ defaults to true
- borderSize the size in pixels of the border defaults to 1
- borderColor a string specifying the color of the border defaults to ‘black’
- useCrosshair a boolean that determines whether or not to show a crosshair cursor defaults to false
- useShadow a boolean that determines whether or not to show a dropshadow behind ‘magnifying glass’ (doesn’t work in IE) defaults to true
- animate a boolean that determines whether or not ‘magnifying glass’ should fade in and out defaults to true
- hideMouse a boolean that determines whether or not to show the mouse pointer (doesn’t work in Safari) defaults to false
If you do a view source on the demo you can see in the site.js file how two different option objects are used. The download contains both the original commented file and a minified version (roughly 1.5 k in size).
Now, I am by no means a javascript or jQuery expert so I’m sure there may be better ways of doing some things. If anyone has any tips, don’t hesitate to post them. Happy early Christmas…
Incidentally, although my wife’s portfolio site isn’t done, take the time to check out her work over on Society 6 ( photography | collage ). You’ll be glad you did.