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:
Next, create a <div> tag in the body of your website where you want your slideshow to be, as follows:
You’ll need to define dimensions for this container in your CSS file. Here is an example:
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:
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!