Hack 61 Construct an Interactive Photo Album


Use JavaScript to save money and get a better photo album to boot.

eBay provides a "photo album" feature, which allows your bidders to view multiple photos right in the auction by clicking thumbnails. However, this feature is available only if you're using eBay's Picture Services to host your photos, which means you're paying extra for rather limited photos.

If you're hosting your auction photos, as described in [Hack #59], all you need is a little JavaScript to accomplish the same thing. See [Hack #60] for another approach, as well as some background information on preparing the thumbnail images used in this hack.

5.8.1 The Hack

Simply place this code in your auction description:

<table cellpadding=10 cellspacing=0 border=1>
   <img src="view1.jpg" border=0 name="view">     [1]
<tr><td align=center>
  <img src="view1s.jpg" border=1     [2]
  <img src="view2s.jpg" border=1     [3]

This creates a simple, two-cell table, shown in Figure 5-10. The upper cell contains the first of several images, and the lower cell contains the thumbnails for all images.

Figure 5-10. This simple photo album gives photos hosted off eBay a classy presentation

Lines [2] and [3] specify the two thumbnails, but they're not linked to their larger counterparts with <a> tags as in [Hack #60]. Instead, the following JavaScript code ? activated by the onClick event ? changes the image [1] in the upper cell:

document.images['view'].src = 'view2.jpg';

The code is simple enough, but its greatest strength is its flexibility.

5.8.2 Hacking the Hack

The first thing to do is put your own images in the photo album. Start by replacing view1.jpg on line [1] with the full URL of the first image you wish to appear in the album. Then do the same for each of the thumbnails, view1s.jpg and view2s.jpg on lines [2] and [3]. Finally, specify the full URLs for the corresponding full-size images, replacing view1.jpg and view2.jpg.

In theory, your full-size images can all be different sizes, but in practice this can cause problems on some browsers. To allow your bidders to view all the images properly, make sure all your JPGs have the same pixel dimensions.

You can have as many thumbnails as you'd like?simply duplicate line [2] or [3] for each additional image. The table is designed to accommodate a virtually unlimited number of thumbnails without modification; for instance, if there are more thumbnails than will fit on a line, they will simply wrap to the next line. If needed, use the <br> tag to insert line breaks between groups of thumbnails.

As it is, this photo album will not function if support for JavaScript is disabled in a bidder's browser. To make the hack work even if JavaScript is disabled, change your thumbnail code (lines [2] and [3]) to the following:

<a href="view1.jpg"><img src="view1s.jpg" width=60 height=45 border=1 
onClick="document.images['view'].src='view1.jpg';return false;"></a>

This works because of the added <a> tag that links the thumbnail image to the full-size image, as described in [Hack #60]. Next, the return false; statement is placed at the end of the onClick event, which disables the link if JavaScript is active. This has the added benefit of showing bidders the little "hand" cursor, so they know the thumbnails can be clicked.

For an extra fee, eBay will give you a "slide show" of your images, which is nothing more than a photo album on a timer. See [Hack #62] for a way to make your own timed slide show.