Nate True's Weblog http://cre.ations.net/$base_path Thoughts and musings from Nate True, casual inventor."; en-us Sat, 20 Mar 2010 16:23:34 -0500 Sat, 20 Mar 2010 16:23:34 -0500 custom http://blogs.law.harvard.edu/tech/rss <![CDATA[The DHTML thumbnail zooming script: How it works]]> 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...

    Read the rest of this post

    ]]> 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...

    Read the rest of this post

    ]]> http://cre.ations.net/blog/post/the-dhtml-thumbnail-zooming-script http://cre.ations.net/blog/post/the-dhtml-thumbnail-zooming-script image, zoom, script, javascript, dhtml, thumbnail Fri, 09 Mar 2007 09:08:29 -0600