So I found this image slideshow and it works well with what my client wants.
http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm
I've got it running in a stand alone HTML file, but when I started adding it to the welcome.tpl things went wrong. The Category.tpl displays and so does my Facebook Like button, but the slide show is a no show
Anyway here's the basis of the code in the HTML file.
This portion is supposed to go above the </head> which I placed in my service_head.tpl file.
Code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="fadeslideshow.js">
/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>
<script type="text/javascript">
var mygallery1=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [480, 400], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["images/Apples.jpg", "", "", "Creative Additions to the Classic Candy Apple"],
["images/Chocolate_Covered_Potato_Chips.jpg", "", "", "Making Chocolate Covered Potato Chips"],
["images/Party_Room.jpg", "", "", "Celebrate Your Birthday or Special Occasion With The Peanut Man"],
["images/Strawberries.jpg", "", "", "Beautiful Fresh Strawberries Dipped in Chocolates"],
["images/Popcorn.jpg", "", "", "Stop By for Freshly Popped Popcorn Everyday"],
["images/Gift_Backets.jpg", "", "", "Custom Made Gift Baskets For Your Friends or Your Employees"],
["images/Chocolate_Covered_Pecan_Clusters.jpg", "", "", "Order Your Pecans Any Way You Like Them"],
["images/Peanut_Girl.jpg", "", "", "Children Enjoy Picking Through Our Traditional and Custom Candies"]
//<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:3800, cycles:0, wraparound:false, randomize:true},
persist: true, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "always",
togglerid: ""
})
</script>
This is the portion of the HTML that displays the slideshow and the other things I want on the welcome page.
Code:
<table width="600" border="0" cellspacing="0" cellpadding="1">
<tr>
<td rowspan="3">{include file="customer/categories.tpl"}</td>
<td colspan="2"><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like href="http://www.facebook.com/#!/pages/Savannahs-Candy-Kitchen/173098054471" show_faces="false" width="450" float: center></fb:like></td>
</tr>
<tr>
<td><div id="fadeshow1"> </div></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
I know I should be using {literal} in a few places, I'm just not sure. And it's late, I'm tired
Thanks,
Mike