Hacks 1917 Industrial.. Strength Tips and Tools [Electronic resources] نسخه متنی

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>
<tr><td>
<img src="/image/library/english/10062_/image/library/english/10062_/image/library/english/10062_/image/library/english/10062_view1.jpg" border=0 name="view">     [1]
</td></tr>
<tr><td align=center>
<img src="/image/library/english/10062_/image/library/english/10062_view1s.jpg" border=1     [2]
onClick="document.images['view'].src='/image/library/english/10062_/image/library/english/10062_/image/library/english/10062_/image/library/english/10062_view1.jpg';">
<img src="/image/library/english/10062_view2s.jpg" border=1     [3]
onClick="document.images['view'].src='/image/library/english/10062_/image/library/english/10062_view2.jpg';">
</td></tr>
</table>

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 = '/image/library/english/10062_/image/library/english/10062_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 /image/library/english/10062_/image/library/english/10062_/image/library/english/10062_/image/library/english/10062_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,
/image/library/english/10062_/image/library/english/10062_view1s.jpg and /image/library/english/10062_view2s.jpg
on lines [2] and [3]. Finally, specify the full URLs for the
corresponding full-size images, replacing
/image/library/english/10062_/image/library/english/10062_/image/library/english/10062_/image/library/english/10062_view1.jpg and /image/library/english/10062_/image/library/english/10062_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
likesimply 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="/image/library/english/10062_/image/library/english/10062_/image/library/english/10062_/image/library/english/10062_view1.jpg"><img src="/image/library/english/10062_/image/library/english/10062_view1s.jpg" width=60 height=45 border=1 
onClick="document.images['view'].src='/image/library/english/10062_/image/library/english/10062_/image/library/english/10062_/image/library/english/10062_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.