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 the O’Reilly learning platform.

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