We embarked on the quest to create the perfect slideshow, the slideshow that could be easily customized, but still contained easy to use management functionality so it could be handled by a non-technologist.
In our coding adventures we have created 5 types of slideshows, all managed by Blogger and/or Google products:
- converted a standard LinkList widget into a slideshow manager with each URL being the URL of the image in the slideshow and the title field being the optional caption (example)
- used a Google Docs spreadsheet as the content (caption, image url, target url) for generating a slideshow
- generated a slideshow from a specified RSS feed from the blog itself, using the first image of each post as the slideshow image (example)
- dynamically re-organized all images within a blog post into a slideshow (example)
- used a Picasa album's RSS feed to generate a managed slideshow (example)
Step #1: create your Picasa album
Nothing like a simple step to get the process started. Create your album, preferably with a simple name, no special characters, and no spaces if it can be helped. Add photos to the album.
Step #2: manage your photos
Give your images captions by clicking on the "add caption" link below each of the photos.
Step #3: change the permissions of the album
In order for the Picasa album to generate the RSS feed we need to change the album from its default permission of "private" to "public on the web". In the photo from Step #1, towards the top right corner, there is a lock icon that says "only you" with an edit link next to it. Click on the edit link and the following display window appears:
Change the "visibility" to be "public on the web" and hit Save changes.
Step #4: arrange the images
Going back to the main album page, click on the link for Organize to set the image order within your slideshow. You can set the order of the images in your album by a default order (such as by date or filename, or you can click and drag images to set your own order. Once done hit the Done button to save the order.
Step #5: the code
There is a lot of code here so unlike our normal practice of including it we're just pasting the clean version.
Using the divs of "slideshow" and "caption", you can place them anywhere within your page template and customize their dimensions using the CSS that is provided (or your own CSS). Change the heights and widths to suit your needs and the slideshow information will automatically fill them out properly. This information goes below the <body> tag but before the </body> tag, just about anywhere in your template.
Questions or comments, please feel free to leave them in the comments below. If we make updates to the script we will post them here.
2012-09-27: Per request we have added a random sort feature to the slideshow! Here is the code.
2012-09-29: Per request we have transformed the script into a function call! This allows you to place all of the script information into the template, but then place the style, divs, and executing script into a static page or blog post, and to set different albums for different pages within the site! Here is the code.
2012-10-30: If you're having an issue with the page jumping back to the top this is because the slideshow needs to be within a fixed container with specified height and width CSS attributes. You would make your divs look something like:
<div id='container' style='height: 600px; width: 500px;'>