Tag Archives: website

Adding a Google AJAX SlideShow to Your WordPress Site

Inserting a customizable  slide show on your WordPress site  can be done without a plugin using the following tools:

Step One:

Step Two:

  • Create a Picasa web album with some sample photos. (Note – feeds from Flickr or Photobucket may be used, but I have not personally tested them. Consult the documentation for guidance on Flickr or Photobucket. )
  • When your album is posted, click on the “RSS” icon to get the feed url for your slideshow (see screenshot)


Web Album with RSS button Circled in Red

Web Album with RSS button Circled in Red









Step Three:

  • Cut and paste the code below into a text editor such as TextEdit or Notepad
  • Insert your feed url between the quotes in line that begins:  var samples =
  • Save your text file

Step Four:

  • Add a text widget to your blog sidebar
  • Insert your Slideshow code
  • Leave the “Automatically add paragraphs” box unchecked
  • Save and review your slide show
  • Customize the inline CSS for display size and background color.

Web albums and the resulting slides shows can be updated directly by clients, which saves time for both the client and designer/developer.

Here is the code for the Google AJAX Feed API displaying my web album in a sidebar text widget:

<script src="http://www.google.com/jsapi" type="text/javascript"><!--mce:0--></script>
<script src="http://www.google.com/uds/solutions/slideshow/gfslideshow.js" type="text/javascript"><!--mce:1--></script>
 
<!--  Inline CSS style for slide show window -->
 
<code>    .gss a img {border : none;}
    .gss {
	  width: 300px;
	  height: 225px;
          color: #dddddd;
          background-color: #8aa0cb;
	  padding: 5px;
    }</code>
 
<!--Script for displaying the slide show and scaling web album images -->
 
<script type="text/javascript"><!--mce:2--></script>
 
<!--container for slide show -->
<div id="slideshow" class="gss">Loading...</div>
Share