Add a Slide Show to Your Website: The Picasa Way

In my last article, I described how to add a photo slide show to your website using jQuery and CSS.  Here, I’ll describe a way to do it using a Google plug-in with the photos in Picasa.  This is pretty cool, because you can simply upload or change photos in Picasa and they will be reflected in your website, without editing any code!  The only downside is a slight reliability hit, since this depends on external sites (Google and Picasa) being up and running.  In my experience, they’re pretty darn reliable, but I have seen instances  when it wasn’t working, due to network traffic or whatever.

The Picasa Way

Let’s get started!  The first thing you have to do is open a Picasa account and upload some photos!

The Google plug-in code and instructions are located here.  It’s pretty self-explanatory and well-documented, but here’s a summary.

First, add these lines into the <head> portion of your website:

<script type="text/javascript" src="http://www.google.com/jsapi"></script><script type="text/javascript" src="http://www.google.com/uds/solutions/slideshow/gfslideshow.js"></script>

Next, create a <div> tag in the body of your website where you want your slideshow to be, as follows:

<div id="slideShow">Loading...</div>

You’ll need to define dimensions for this container in your CSS file.  Here is an example:

#slideShow {
width : 160px;
height : 160px;
padding : 10px;
}

Now go back to your HTML file.  Immediately below the <div> that you just added, add the code to call the Google Slide Show script:

<script type="text/javascript"> function LoadSlideShow() { var feed = "http://feed.photobucket.com/images/sunsets/feed.rss"; var options = {displayTime:2000, transistionTime:600, scaleImages:true}; var ss = new GFslideShow(feed, "slideShow", options); } /** * Use google.load() to load the AJAX Feeds API * Use google.setOnLoadCallback() to call LoadSlideShow once the page loads */ google.load("feeds", "1"); google.setOnLoadCallback(LoadSlideShow); </script>

Now, this code doesn’t call your Picasa album just yet.  Log into Picasa and go to the album that you want to have in your slide show.  In the right column, click on the “RSS” icon.  This will take you to the RSS page.  Copy the entire URL of that page.  It will look something like this:  https://picasaweb.google.com/data/feed/base/user/113638542112245607209/albumid/5629061670278588657?alt=rss&kind=photo&hl=en_US


Go back to the Google code on your page.  Look for this line of code (It’s the third line down):

var feed = "http://feed.photobucket.com/images/sunsets/feed.rss";

Now, paste the URL that you copied into the quotes on the right hand side of this line, so that you have something like:

var feed = "https://picasaweb.google.com/data/feed/base/user/113638542112245607209/albumid/5629061670278588657?alt=rss&kind=photo&hl=en_US";

Voila!  Upload the code to your server and check it out.  You should see a slide show using the photos in your Picasa album!  Further customization details are available on the Google site.  Hope you find this useful!

– Brian

9 thoughts on “Add a Slide Show to Your Website: The Picasa Way

    1. I don’t know of a way to include captions using this method. However, you can include captions if you use the jQuery technique that I describe. I found this out by accident. The jQuery slide show will cycle through any kind of container, not just images. You can use this fact to add whatever you want, including captions, to the slide show. Thanks! – Brian

  1. You omitted an important bit:

    You are required to set a width and height styling attribute. SlideShow will not work without a size being set. You can also set other styling attributes on this element such as padding, borders, etc. For example, a style rule like this might be useful.

    #slideShow {
    width : 160px;
    height : 160px;
    padding : 10px;
    }

    Otherwise thanks for your post. I wouldn’t have found the thing without your post. Much appreciated.

Leave a Comment or Ask a Question