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  src="/books/4/158/1/html/2/http://www.michaelmorrison.com/ebay/skates1.jpg"   alt="Mission Amp Fly Ice Hockey Skates" style="border:5px solid black"   onclick="nextImage();" /><br />   <div  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="/books/4/158/1/html/2/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/, the following JavaScript code would correctly set the slide image:

 img_element.setAttribute("src",   "http://www.mygolfstuff.com/images/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!




SAMS Teach Yourself HTML and CSS in 24 Hours
Sams Teach Yourself HTML and CSS in 24 Hours (7th Edition)
ISBN: 0672328410
EAN: 2147483647
Year: 2005
Pages: 345

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net