|
|
Nate True's Weblog: Posts tagged with thumbnail
Posted by natetrue 1 year ago
 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!
|
|
Ads by ZTMC Credit Card Consolidation - Debt - Loan - Credit Counseling
