THUMLY HOME

Thumly Home

I've prepared this page to demonstrate some of my own ideas about scripting and image tag manipulation which is often called 'Click to Enlarge.'

There are dozens of ways to construct an image so that when clicked, the photo changes size or even source. If the intention of using these methods is to provide a faster load for the viewer, some common sense is needed in addition to the right script and HTML.

Example 1

If the auction contains only one or two images, there is little to be gainedby using separate smaller images for the thumbnail view. We assume the viewer willwant to see the full size image so why not save transfer bytes by loading the full size image only once? Size is controlled using the width and height attributes of the image tag. To the bidder it appears the image is 'enlarging.' What is actually happening in this example is more like "Click to un-shrink"

full size image is loaded once. Only 16052 bytes are required to load before bidder can see full size image

Example 2

Generally, your auction visitors who use dialup connections should seesomething to keep them interested within the first few seconds. If your auction will contain several large photos, one way to accomplish a quick load is by using true thumbnails - smaller images which will appear immediately. The thumbnails can then containa link to load the full-size photo when clicked. Use common sense because yourbidder must still be patient. Plus more total bytes will be processed by the timeall the images have been viewed!

13% more total bytes must be loaded before bidder can see full size image.
Thumbnail:2442 Bytes
Main Image16052 Bytes
Total bytes18494 Bytes

Example 3

As shown by the examples above, you must reserve space on your listingto display the full size image. Failure to block out space will result in page jumpand confuse your bidder when the page is redrawn. This example demonstrates howtext might be formatted near the thumbnail and still allow the visitor to see thefull size image. View the source of this document to see how the target attributeis used to open a new window for the full size image.




Example 4

Our final example presents all images at once. We call this a thumbshow. View the code below to see how it's done.