How to Create a Slide Show for a Web Site

Embedding a photo slide show into your website is a great way of adding color to your site, showcasing personal pictures and displaying products. There are a handful of easy-to-use embeddable slide shows that can be quickly installed and customized to fit your site.

Instructions

Create a Slideflickr Slide Show

1. Visit the Slideflickr website (see Resources) and click on "Create your own slideshow."

2. Enter a Flickr user name, or the URL of a user name, group or set. A Flickr group is a group of members sharing photos around a theme. A Flickr set is a set of related photos created by a user, which can be tagged and shared.

3. Customize your slide show from the settings panel, then hit "Preview" when you're done.

4. Copy the code and paste it into your site.

Create a Picasa Slide Show

1. Log in to Picasa (see Resources) and select the "My Photos" tab at the top of the screen.

2. Select the album you want, then click on "Embed Slideshow" from the right side of the screen.

3. Customize the height and width settings, then copy and paste the code into your site.

Create a jQuery Slide Show

1. Download the Simple jQuery Slideshow code (see Resources).

2. Paste a hotlink to the jQuery code in the head section of your web page:

   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

   This code is hosted is hosted by Google, and is freely available for hotlinking.

3. Paste the Simple jQuery Slideshow JavaScript code into the head of your web page between the <script type="text/javascript"></script> tags.

4. Paste the Simple jQuery Slideshow CSS code in your site's CSS file.

5. Upload your images to your server, then insert the slide show code into your website:

   <div id="slideshow">
   <img src="image1.jpg" alt="Slideshow Image 1" class="active" />
   <img src="image2.jpg" alt="Slideshow Image 2" />
   <img src="image3.jpg" alt="Slideshow Image 3" />
   <img src="image4.jpg" alt="Slideshow Image 4" />
   <img src="image5.jpg" alt="Slideshow Image 5" />
   </div>

   Replace the image URLs with the actual URLs of your images.

References

• Picasa Help: Embedding Albums, Images and Slides

Resources

• Slideflickr
• Simple jQuery Slideshow
• Picasa Help: Embedding Albums, Images and Slides