jQuery Zoom

Working on a recent project I needed to be able to make a ‘zoom’ style effect. The easiest way I could think of to do this was a simple + and – zoom bar (just like google maps) over a background image.

This piece of jQuery inserts a nicely styled compliant ul with li’s into the container specified (if it’s not there already) and sets some trigger events for the a tags.

Now when you click on the plus or minus the background image is switched out for a larger version (passed in to the declaration).

The more images you pass in the more bars appear in the zoom control.

To make it work you need to set up some css and pass in the ‘target_div’ parameter in to the js with an array on image paths; and thats it, everything else is worked out for you.