New Zoom Code

I think I'm really going to like the new zoom code I've added. I originally got it from Daan on this thread http://www.jsworkshop.com/bb/viewtopic.php?p=118, but I've modified it a little since then. For use in Blogger, you edit your template, and add this to the HEAD area near the top.

<script language="JavaScript" type="text/JavaScript"> function PicWindow(piclink) { pic = new Image(); pic.src = (piclink); PicWindow_GetSize(piclink,1); } function PicWindow_GetSize(piclink,attempt) { if (attempt == 20) { PicWindow_Open(piclink,580,580); } else if (pic.width != 0) { PicWindow_Open(piclink,pic.width,pic.height); } else { attempt += 1; timeoutfunction = 'PicWindow_GetSize("' + piclink + '",' + attempt + ')' setTimeout(timeoutfunction,50); } } function PicWindow_Open(piclink,width,height) { width = width + 20; height = height + 20; win = window.open(piclink,'','width=' + width + ',height=' + height); } </SCRIPT>

Then to make the link where a person clicks, you use this code:

<a onMouseOver="window.status='Zoom in!'; return true;" onMouseOut="window.status=' '; return true;" onclick="javascript:PicWindow(this.href);return false;" href="MyPicture.jpg" target="_blank"> <img src="MyPicture.jpg"> </a>

Instead of "Zoom in!" you can put any text you want. Also replace MyPicture.jpg with your filename. You can even use http://www.server.com/MyPicture.jpg if you need to. Just mind your quotation marks!

For a while I was working on changing the window title of the popup to something like "Zoomed Picture", but I just didn't have the kind of success I wanted. http://www.javascripter.net/faq/writingt.htm helped me a lot, but I ended up not using it anyway. All this is useful practice for my javascript skills, so none of it is wasted effort really.