Back   Tips
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 gained by using separate smaller images for the thumbnail view. We assume the viewer will want to see the full size image so why not save transfer bytes by loading the full size image only once? Size is controlled using thewidth 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 see something 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 contain a link to load the full-size photo when clicked. Use common sense because your bidder must still be patient. Plus more total bytes will be processed by the time all 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 listing to display the full size image. Failure to block out space will result in page jump and confuse your bidder when the page is redrawn. This example demonstrates how text might be formatted near the thumbnail and still allow the visitor to see the full size image. View the source of this document to see how the target attribute is 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 source to see how it's done.

Back   Tips

Sponsored by Pix Clix Image Groups and Thumb-Shows. Just Click!