Creating a Slide Show Item Listing

If you really want to add some punch to your eBay auction listings, you can inject some JavaScript code that turns a static image into an ever-changing slide show. This allows you to incorporate multiple images of an auction item without having to clutter up the page. Additionally, you can add a caption to each image that includes some descriptive text about the item.

Listing 20.4 contains the code for the final version of the hockey skates eBay auction page, which takes advantage of JavaScript to incorporate a slide show into the item description.

Listing 20.4. This Web Page Uses JavaScript Code to Present a Dynamic Slide Show of Item Images

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><title></title></head>

<body>
<!-- EBAY HTML CODE STARTS HERE -->
<script type="text/javascript">
  <!-- Hide the script from old browsers
  var slide_wait = 3; // in seconds
  var slide_text = ["Side view of skates, some scuffs but overall good shape.",
                     "Front view, toes are solid and intact.",
                     "Other side view, normal wear and plenty of life left.",
                     "Rear view, practically brand new condition."];
  var cur_slide = 1;
  var timer = 0;

  // Preload the images
  for(var i = 0; i < slide_text.length; i++) {
    var image = new Image();
    image.src = "http://www.michaelmorrison.com/ebay/skates" + i + ".jpg";
  }

  // Start the initial timer
  timer = setTimeout("nextImage();", slide_wait * 1000);

  // Set the background image
  document.body.background =
    "http://www.michaelmorrison.com/ebay/missionback.jpg";

  function nextImage() {
    // Clear the timer and set a new one
    if (timer != 0)
      clearTimeout(timer);
    timer = setTimeout("nextImage();", slide_wait * 1000);

    // Advance to the next slide image
    if (++cur_slide > slide_text.length)
      cur_slide = 1;
    var img_element = document.getElementById('slide');
    img_element.setAttribute("src",
      "http://www.michaelmorrison.com/ebay/skates" + cur_slide + ".jpg");
    img_element.setAttribute("alt", slide_text[cur_slide - 1]);

    // Update the slide description
    document.getElementById('caption').innerHTML = slide_text[cur_slide - 1];
  }
  // Stop hiding the script -->
</script>

<h2 style="text-align:center; color:white">Mission Amp Fly Men's Ice Hockey
Skates - Size 12</h2>
<div style="color:white">
  This size 12 pair of Mission Amp Fly men's ice hockey skates is used but in
  very good condition. These suckers have plenty of life in them, not to
  mention a few goals and assists. Following are the details of the skate
  features, along with a few pictures. Thanks for bidding!
  <ul>
    <li>Carbon outsole stiffer, lighter and thinner</li>
    <li>Split Throat&#153; pattern design for improved flexibility and
    minimized creasing</li>
    <li>Indy Foam&#174; ankle chambers with multiple foam layers provide
    superior ankle lock and increased comfort</li>
    <li>Interior Material - Clarino&#153; moisture wicking lining</li>
    <li>Sensory&#153; footbed</li>
    <li>Stiffness Rating - 7.3 Surlin&#153;</li>
    <li>Leather quarters</li>
    <li>Improved Formula&#153; Bladeholder with DriveShaft technology. Single
    allen key bolt system</li>
    <li>Laser-cut stainless steel runner from Sweden, with superior grain</li>
  </ul>
</div>
<div style="text-align:center; color:white">
  <img id="slide" src="http://www.michaelmorrison.com/ebay/skates1.jpg"
  alt="Mission Amp Fly Ice Hockey Skates" style="border:5px solid black"
  onclick="nextImage();" /><br />
  <div id="caption" style="text-align:center; font-size:16pt;
  font-weight:bold">Side view of skates, some scuffs but overall good
  shape.</div>
</div>
<p style="color:white">
  To learn more about me, just click <a
  href="http://members.ebay.com/aboutme/stalefishlabs/"><img
  src="http://pics.ebay.com/aw/pics/aboutme-small.gif" alt="About Me"
  style="border-style:none" /></a>.
</p>
<!-- EBAY HTML CODE ENDS HERE -->
</body>
</html>

It isn't terribly important for you to understand the script code that makes this page tick. All you really need to be aware of is how the slide captions are created, as well as how to change the names of the slides themselves. The following code is what establishes the captions for the slides:

var slide_text = ["Side view of skates, some scuffs but overall good shape.",
                   "Front view, toes are solid and intact.",
                   "Other side view, normal wear and plenty of life left.",
                   "Rear view, practically brand new condition."];

This code creates an array of captions that have a one-to-one relationship with each slide image in the slide show. The number of captions must match the number of slide images.

Did you Know?

To speed up or slow down the slide show, change the value of the slide_wait variable in the JavaScript code. This variable controls the amount of time each slide is displayed before moving to the next one. As an example, the following code slows down the slide show by increasing the slide delay to 5 seconds per slide:

var slide_wait = 5; // in seconds

The slide images themselves enter the code in a few places. The following line of code shows how the URL of each slide image is calculated based on the current slide:

img_element.setAttribute("src",
  "http://www.michaelmorrison.com/ebay/skates" + cur_slide + ".jpg");

The main thing you need to take from this code is that you must change the URL to accommodate your own specific images. For example, if your auction item images are named putter1.jpg, putter2.jpg, and so on, and are located at http://www.mygolfstuff.com//images/004/, the following JavaScript code would correctly set the slide image:

img_element.setAttribute("src",
  "http://www.mygolfstuff.com//images/004/putter" + cur_slide + ".jpg");

There are actually a few places in the code where you'll need to make changes based on your specific item images. Just look for the word "skates" and make changes accordingly.

Figure 20.7 shows the completed hockey skates auction item page with the slide show running.

Figure 20.7. The hockey skates eBay auction item page now takes advantage of a carefully timed slide show to display a succession of item images.

Not too many eBay auctions are interesting enough to include a dynamic slide show that cycles through item images. By blending JavaScript, HTML, and CSS, you'll hopefully be able to rack up some solid eBay sales numbers!