A couple of people have asked about the CSS magnifier that I wrote for the National Maritime Museum web site, so this is a test to see if I can easily embed a magnified image in a blog post.

To add the magnifier to an existing image, you’ll need a copy of the CSS file, youngpup’s DOM-Drag script (for the drag and drop functionality) and the magnifier javascript. Save these to your web server, and link them to the page that you want to use them on. Now, you’ll need to change the markup around your image. The markup I’m using is the following:

<p> <a href="http://www.flickr.com/photos/eatyourgreens/323377296/" title="See the original photo on flickr">Parc Guell</a> <a id="ZTbutton" href="javascript: void(0);">Zoom on/off</a> </p> <p id="ZTthumbnail"> <img id="zoomImage" src="http://farm1.static.flickr.com/82/323377296_fdf9f077e8.jpg" width="500" height="375" alt="Parc Guell" /> </p> 

Finally, you’ll need to add some JavaScript to add the magnifier to your photo:

<script type="text/javascript"> addEvent(window, 'load', function() { HotSpotController.init("zoomImage",150, 'http://farm1.static.flickr.com/82/323377296_fdf9f077e8_o.jpg','ZTbutton'); }); function addEvent(obj, evType, fn) { if (obj.addEventListener) { obj.addEventListener(evType, fn, false); return true; } else if (obj.attachEvent) { var r = obj.attachEvent("on" + evType, fn); return r; } else { return false; } } </script>

The arguments to HotSpotController.init() are: the id of the image that you want to magnify; the size of the magnifier in pixels (adjust as necessary); the URL of a large image to use as the magnified view; the id of the link to use as the on/off button.

This particular code gives us the image shown below. Turn the magnifier on and off with the ‘on/off’ link. Move it around by either dragging with the mouse, clicking on the photo to select a particular point or use the cursor keys when the on/off link has focus (shifted cursor keys to scan quickly around the photo.)

Demo: http://eatyourgreens.org.uk/archives/2007/08/adding_a_magnif.html
Download: http://www.nmm.ac.uk/collections/js/HotSpot2.js
Source: http://eatyourgreens.org.uk/archives/2007/08/adding_a_magnif.html

Related Listings:

1. TjpZoom Magnifier JavaScript The JavaScript image magnifier script. As you may have realized,...
2. Unobtrusive Loupe Magnifier Loupe Magnifier You can use Loupe.js to add a loupe...

Do you like this post?

Email: