cre.ations.net - Blog entry: The DHTML thumbnail zooming script: How it works

Home About cre.ations.net Recent creations Nate True's blog Most popular Most viewed Browse creations

Categories:

"Art"Fashion Food Home Tech Video Other

Quick search

The DHTML thumbnail zooming script: How it works

Tags: dhtml, image, javascript, script, thumbnail, zoom

640 800 Full

I've gotten more than a few responses to the cre.ations.net photo zooming feature. I really like how trivial it is to click on a photo to see the larger version without having to navigate between pages at all (this is also why no creation on here is paginated). Many have asked how it works, and here is your answer!

From a high-level perspective, here's how it goes down:

The user clicks on an image.

A script function is run which hides the original image and replaces it with an absolutely positioned image. This allows the image to 'leave' the normal document flow.

A timer function moves the image stepwise to its final location, in the center of the document as it is currently scrolled.

Focus is transferred to a link hidden off of the top-left corner of the document. This link will de-zoom the photo when it loses focus.

The user clicks the image or anywhere else on the page, initiating the dezooming script.

The timer function initiates again, this time stepping the photo back to its original position.

When the image is back in its position, the original image is de-hidden and the floating image is destroyed.

Feel free to re-use the code on your own website.

Add this just inside the <body> tag of any page you want to use it on (Thanks Frederic for reminding me about this):
<script src='http://cre.ations.net/imagezoom.js' type='text/javascript'></script> <span id='insertimageshere' style='position: absolute; text-decoration: none'> </span> <a id='lostfocusthingy' style='position: absolute; text-decoration: none' href='#'> </a>

Then for each image, use this code:

<a class='expand_a' onclick='imagezoom(this, "http://url.to/full.size.image")'> <img src="http://url.to/thumbnail.image" class='expand_img' /> </a>

If you have alignment issues, make sure you don't have any unclosed <p> tags or anything of that sort.

Let me know if you use the code; I love to hear when my creations are appreciated!

Return to Nate True's blog

Comments:

Posted by natetrue 1 year ago ( 14-Mar-2007 10:43:26 )

Just updated - thanks to Frederic for pointing out a few things I'd forgotten.

Posted by willotoons 1 year ago ( 18-Apr-2007 10:56:51 )

You are awesome! I clicked through from the Craftzine blog (to the tshirt bleaching tutorial), and saw that image zoom thing & immediately had to have it. :) I clicked around a bit & finally just saw this post (maybe link to it from the about page?).

You're so awesome to share your code, Nate - thank you! I know it will come in handy soon.