When one image just won’t do; incorporating slideshows on your Web site. Part 1: Javascript


Slideshow using javascript

Photos are from Parade the Circle 2006.
This year's parade is this Saturday, June 9.

It's funny how people get the same idea at the same time. Last week I had two different people ask me how they could use a slideshow instead of a still picture on their Web site. Many people find that one image doesn't exemplify all of the qualities of the department's site. That was true for me when I was building the Marketing and Communications site. There wasn't one image that would symbolize our group so I used Flash to make a slideshow highlighting different facets and activities of the university. This slideshow appears on our main page in place of the usual photograph.

If you are already familiar with Flash you may want to use this option. If you've never used Flash, you will probably find it easier to use Javascript. There are many scripts available that only require minor edits.

Using Javascript to create a slideshow

If you do a Google search on "javascript slideshow" you'll find all sorts of options. For today's project I chose to use the Multi image slideshow script I found from http://javascriptkit.com/. This is the slideshow you will see on the right. You don't need to be a Javascript whiz to use this script. Anyone comfortable with the basics of HTML should be able to make the edits fairly easily.

  • To use this script you will first want to prepare a series of .jpg images that are sized to the same dimension. Upload these to the same directory as the page on which the slideshow will appear.
  • Copy the script from the box on http://wsabstract.com/script/script2/multishow.shtml and paste it into the location it should appear on your Web page.
  • Edit the script.
    • This script allows you to have multiple sets of slides and links to each set. Since I was only using one set I deleted the code for the two extra sets, changed "3" to "1" in "#1 SPECIFY number of slideshows" and removed the links that came after the end of the script. The comments in the script make it easy to understand which sections you can edit or remove.
    • Under "#2 SPECIFY interval between slide" I left the interval at 2000 but you could easily modify this if you want the pictures to change more slowly.
    • Add or delete paths to images as necessary. I used 5 images (rather than 3) so, following the same format as in the script, I added my 4th and 5th images in the areas under "#4 SPECIFY image paths of 1st slideshow" and "#5 SPECIFY urls of 1st slideshow."
  • Save your .html file, upload it to the server and see if it is working. If it isn't working check to make sure you specified the right paths to your images and didn't accidently delete any necessary code.

P.S. Those of you know pay attention to such things may have noticed that this script causes some validation errors. I'm going to see about cleaning it up tomorrow.

P.S. P.S. For those of you anxious to update your sites, I will begin distributing the appropriate new logo files for Web Development on July 1st. I am preparing and testing the files now.
Bookmark & Share:
  • Facebook
  • StumbleUpon
  • del.icio.us
  • Digg
  • LinkedIn
  • FriendFeed
  • MySpace
  • email

    Share on Google Buzz

1 Comment »
  1. We've been considering adding photos for a while, to see if it helps visitors understand some of the conditions we explain. You're right that a single photo, or a couple of static photos, doesn't have the impact that something like a slideshow can produce. Given the choice of using a third-party app vs. doing it ourselves, it's good to know that Java is this simple. Thanks.

    Comment by jelon — January 19, 2008 @5:42 pm

Leave a comment

RSS feed for comments on this post. | TrackBack URL