Google Site HTML Box slideshow

I was looking for a way to create a nice looking slideshow on a Google Site, that is easy to update.   While there are many gadgets out there that works, many of them relied on an rss feed from an external site like Flicker.   I wanted something even simpler.   What I came up with is a simple bit of code that can get pasted into an HTML box in Google Sites.

Here is an example on a Google Site

Girls playing with their new Nerf bow in the back yard.

Once inserted it is a little misleading as you will not see the slideshow change unless you are a viewer.  So to preview you need to "Preview Page As Viewer".

Into this box past one of the two following codes.   The first one just uses images, while the second allows you to mix images with text or any content.   If you want you can play with the css to add a drop shadow and other style enhancements.  Just replace the initial image, which is what will show up before the slideshow loads, and the images inside the "slideshow" div.

Just images:

 <style>  
 #slideshow, #initial {   
   position: relative;  
   width: 800px;   
   height: 240px;     
 }  
 #slideshow > img {   
   position: absolute;  
 }   
 </style>   
 <div id="initial"> <img src="http://www.fhuhs.org/files/slide1.png"></div>  
 <div id="slideshow" style="display:none">  
  <img src="http://www.fhuhs.org/files/slide1.png">  
  <img src="http://www.fhuhs.org/files/slide2.png">  
  <img src="http://www.fhuhs.org/files/slide3.png">  
  <img src="http://www.fhuhs.org/files/slide4.jpg">  
  <!-- <div>Pretty cool eh? This slide is proof the content can be anything. </div> -->  
 </div>  
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"> </script>  
 <script>  
  //http://css-tricks.com/snippets/jquery/simple-auto-playing-slideshow/  
 $("#slideshow > img:gt(0)").hide();  
 setInterval(function() {   
  $('#slideshow > img:first')  
   .fadeOut(1000)  
   .next()  
   .fadeIn(1000)  
   .end()  
   .appendTo('#slideshow');  
 }, 3000);   
 $('#initial').hide();  
 $('#slideshow').show();  
 </script>  

Images, Text, any content

 <style>  
 #slideshow, #initial {   
   /* margin: 50px auto; */  
   position: relative;  
   width: 800px;   
   height: 240px;   
 }  
 #slideshow > div {   
   position: absolute;  
 }  
 </style>   
 <div id="initial"> <div><img src="http://www.fhuhs.org/files/slide1.png"></div></div>  
 <div id="slideshow" style="display:none">  
  <div> <img src="http://www.fhuhs.org/files/slide1.png"> </div>  
  <div> <img src="http://www.fhuhs.org/files/slide2.png"> </div>  
  <div> <img src="http://www.fhuhs.org/files/slide3.png"> </div>  
  <div> <img src="http://www.fhuhs.org/files/slide4.jpg"> </div>  
  <div>Pretty cool eh? This slide is proof the content can be anything. </div>  
 </div>  
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"> </script>  
 <script>  
  //http://css-tricks.com/snippets/jquery/simple-auto-playing-slideshow/  
 $("#slideshow > div:gt(0)").hide();  
 setInterval(function() {   
  $('#slideshow > div:first')  
   .fadeOut(1000)  
   .next()  
   .fadeIn(1000)  
   .end()  
   .appendTo('#slideshow');  
 }, 3000);   
 $('#initial').hide();  
 $('#slideshow').show();  
 </script>