Adding a magnifier to images with CSS and JavaScript
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.
There are a couple of small bugs that need fixing: the positioning is slightly off, and the styles for notes are being overriden by the local CSS. Otherwise, it seems to work without any modification of the original code.
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.)
Comments
I like it!
Posted by: Blair Millen | September 3, 2007 4:16 PM
Great job. Actually the best searching over the web. Thank you for publishing this code.
Posted by: Thanos | September 19, 2007 11:07 AM
Its a great script.
Posted by: Logo Design | September 21, 2007 11:02 AM
This one is cool. KudosToCreator™ :). But one thing I miss is the "Magnifier Glass". See http://www.netzgesta.de/loupe/.
Adding a magnifier glass will really add a star to the script.
I should also look at what is better in terms of perfomance, easy of use, etc etc.
Samyak
Posted by: Samyak Bhuta | September 23, 2007 7:04 AM
www.piperlime.com has an interesting implementation of this.
Posted by: HugaMonkey | October 10, 2007 12:55 AM
I haven't stepped through the code yet (Probably should have before asking this) but is there a way to enable this by default without having to click on the "Zoom On/Off"? Thanks.
Posted by: Kyle | October 17, 2007 8:44 PM
Good question Kyle - that should be possible but, off the top of my head, I don't think the code supports it at the moment. It should be a matter of modifying the function that runs after the large image has downloaded.
Re. the loupe magnifier, and the one on piperlime.com, those seem to require a mouse. For accessibility reasons, I really wanted something that could be used from the keyboard if necessary. Have a look at the annotated 'George Graham in his cabin' for an example. It's not brilliant without a mouse, but it is possible to navigate around the picture, and notes, using just tab, enter and the cursor keys.
Posted by: Jim | October 19, 2007 4:45 PM
G8 jobs but where is demo i see this one
Posted by: Kunjal | November 12, 2007 2:19 AM
directly from brazil... awesome!!!
Posted by: Allan Oliveira | December 2, 2007 10:56 PM
Very good in deed.
It would be great if it could be possible to enable zoom by default and to jump to a specific hotspot.
Posted by: Alexandre | December 4, 2007 4:19 PM
esta es una magnfica vista te la envio en este tiempo de hermandad
Posted by: jorge urriola | December 28, 2007 3:48 PM
this script for 1 image. how i can use this script for 10 images or for images gallery.
thnx
Posted by: ismail | January 12, 2008 11:44 AM
sorry i forget. all images show in one page. one page have 15 images. how i can use for all images.
Posted by: ismail | January 12, 2008 11:49 AM
Hi Ismail,
You're right, ths won't work for multiple images on a page. When we have a gallery of images, the thumbnails link through to a page with a single photo, which then has a magnifier attached. Here are two examples:
Freeze Frame
Art for the Nation
Would that approach work for your gallery?
Posted by: Jim | January 12, 2008 1:32 PM
Hi,
Great bit of software, best I've seen yet. Is it possible to flip the draggable smaller box and the magnified box around so that the smaller box is on the top and the viewer is below it. It would work better for me this way due to the layout of my site. Also, how can I change the size of the smaller box, I've tried making changes but it always stays the same size. Thanks in advance. Gav
Posted by: Gav | January 24, 2008 3:15 PM
Hi, Great work. Could you explain more how to make one sample like your "george graham in this cabin" step/step. It's possible to fix the zoom and only drag the small corner . Many thanks
Posted by: Romi Pierre | January 25, 2008 11:04 PM
Thanks for thekind words. Gav - have you tried changing the number 150 in the line of script that calls HotspotController.init()? That parameter should change the size of the magnified view. If it doesn't, that's a bug and I'll fix it.
The positions of the boxes are set by the rules for #viewPort and #magnifier in the css file. Try changing the values for left: and top: That should alter the relative positions of the two boxes.
Posted by: Jim | January 25, 2008 11:34 PM
Romi: for the painting of George Graham, we added notes to the picture by calling
HotSpotController.addHotspot(x,y,title,note)once for each new note, after initialising the magnifier. The arguments are the x,y coordinates of the hotspot, the title of the note and the text of the note, which may contain HTML.Here's an example, for one of the notes on the George Graham painting:
HotSpotController.addHotspot(75, 375, 'Steward spilling gravy', 'Only the steward on the left directly confronts the viewer with his gaze. His smile invites the spectator into the picture, while he seems unaware that he is tipping gravy down the back of the seated man in front of him. Hogarth has thus introduced elements of humour into the portrait, which also implies political allusions.');You can also set the size of the hotspots themselves by calling
HotSpotController.setHotspotSize(size)in your intialisation code, where size is the hotspot size in pixels. I find 150 is usually a good value.Posted by: Jim | January 26, 2008 5:17 PM
Thanks, and how to fix the zooming image to left bottom corner, only mouve the Hotspotzoomer.
Posted by: Romi | January 28, 2008 3:01 AM
Hi Romi,
Here's a page which uses an older magnifier script I wrote, where the zoomed image container is fixed. Is that the sort of behaviour you need?
It would require hacking the javascript to change the drag and drop behaviour slightly for the current script, I think.
Posted by: Jim | January 28, 2008 10:09 AM
Hi,
Is it possible to change the magnifier so that the magnified image only loads on an onclick event as opposed to when the page loads which seems to be the default?
Thanks Gav
Posted by: Gav | February 19, 2008 4:00 PM
Hi Gav,
The large image is loaded by the init() method, which is attached to the window onload event in my example. But you can change that, if you wish.
Change the line
addEvent(window, 'load', function() {…})toaddEvent(DOMnode, 'click', function(){…})where you'd replace DOMnode with a reference to the element that you want to listen for clicks on – it could be 'window', for example.That would mean, of course, that the user would have to wait for the magnifier to initialise after clicking the mouse. The buttons and magnifier functions are not available until after the large image has downloaded.
Posted by: Jim | February 19, 2008 11:02 PM
Hi Jim,
Thanks again for your quick and helpful response. However, I am unable to get this to work (sadly I'm not a JS expert!) as I need it to and also have a couple more questions. Could I contact you via a private email address, I have included mine on the contact form. Thanks again Gav
Posted by: Gav | February 26, 2008 2:04 PM
Very good job !
Posted by: fizik | March 21, 2008 1:16 PM
Is it possible to convert this script to follow the mouse without the need to hold down a button and drag? I love the script! The Gap owned sites (i.e. piperlime.com) use something very similar to MagicZoom (formerly luckyzoom). I also like the notes you can leave, very nice! The port cities script is almost 100% what I am looking for, just wanted to see it follow the mouse rather than drag the square once I've toggled on the feature, keep up the GREAT WORK!
Posted by: Rich | April 3, 2008 8:00 PM