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.)
I like it!
Great job. Actually the best searching over the web. Thank you for publishing this code.
Its a great script.
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
http://www.piperlime.com has an interesting implementation of this.
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.
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.
G8 jobs but where is demo i see this one
directly from brazil… awesome!!!
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.
esta es una magnfica vista te la envio en este tiempo de hermandad
this script for 1 image. how i can use this script for 10 images or for images gallery.
thnx
sorry i forget. all images show in one page. one page have 15 images. how i can use for all images.
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?
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
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
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.
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.Thanks, and how to fix the zooming image to left bottom corner, only mouve the Hotspotzoomer.
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.
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
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.
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
Very good job !
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!
That’s very cool I like it. Don’t know where I’d use it just yet, but I’m sure I’ll think of something 🙂 Very cool.
Mine isn’t working IE. I’m assuming I zigged when I should have zagged. Thoughts?
🙁
Hi Jennifer,
It’s hard to say without seeing an example. Does my example above work in IE for you?
Thank you for your website 🙂
I made on photoshop backgrounds for myspace,youtube and even more
my backgrounds:http://tinyurl.com/5cy5cq
have a great day and thank you again!
Great code! Could this be implemented with something like simpleviewer that I use to display my flickr images on the website?
Hi Joy, I think simpleviewer uses Flash to display Flickr images, so it wouldn’t work with this javascript.
Hello,
A really great Ipad compatible script! Thank you for sharing it :o)
I am bumping in only one little problem I do not seem able to fix. When the zoom is turned on, it only shows 2/3 of the length of the large image. What should I do to correct this?
Thanks again,
Katherine
Hi Katherine,
The two images in your example are not quite the same aspect ratio.
The small image is 310 by 433 pixels. 310/433 = 0.72.
The large image is 1785 by 2895 pixels. 1785/2895 = 0.62.
I think that is causing the problem. The script is scaling coordinates from the small image, assuming that the height and width of the large image are in the same ratio as the small image. I would suggest replacing the small image with one that is a scaled copy of the large image. That might fix the problem.
Thank you for your quick answer 🙂
I had not thought of the the aspect ratio between the two images but it sounds very logical and I am sure that will fix the problem.
Thank you again for your help and a great script!
Katherine
Will need to hack the drop and drop code but other than that it’s a good solution to solve our problem, well done. Need to determine its application on eCommerce websites, something to think about.