Construct an Interactive Photo Album

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

eBay provides a “photo album” feature to accommodate more than one photo in your listings, provided you’re using eBay’s Picture Services [Hack #76] to host your photos. If you’re hosting your own photos, all you need is a little JavaScript to accomplish the same thing.

The first thing you need to do is create thumbnail versions [Hack #77] of each of your photos. Then, place this code in your listing description:

<table cellpadding=10 cellspacing=0 border=1>
<tr><td>
	<img src="view1.jpg" border=0 name="view">
</td></tr>
<tr><td align=center>
     <img src="view1s.jpg" border=1 
                    onClick="document.images['view'].src='view1.jpg';">
     <img src="view2s.jpg" border=1
                    onClick="document.images['view'].src='view2.jpg';">
</td></tr>
</table>

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

This simple photo album gives photos hosted off eBay a classy presentation

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

Lines ...

Get eBay Hacks, 2nd Edition now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.