Adding a Slide Show

I have had a couple of requests for a product slide show type of thing for people's stores. If this is something you would also like, you might like to give this one a try:

http://www.printfection.com/ukulele#slideshow

Step 1: Script - Add the following to the bottom of your Base HTML


<script src="http://www.australele.com/usw/js/tp-jq.js" type="text/javascript"></script>
<script src="http://www.australele.com/usw/js/jq-if.js" type="text/javascript"></script>
<script src="http://www.australele.com/usw/js/sshow.js" type="text/javascript"></script>
<script type="text/javascript">
var ssSpeed = "slow";
var ssTimeout = 4000;
var ssHeight = "180px";
</script>

The three variables can be set as follows. ssSpeed controls the speed of transition and can be set to slow, normal or fast. ssTimeout is the time in milliseconds that each image is shown for. ssHeight is the height of the slideshow.

If you have used any of my other code based tricks, you will not need the line in Red.

Step 2: CSS - Not a huge amount of CSS required for this one, you will need to have these two lines:


#sshow {visibility: hidden}
#sshow img {border:none}


Step 3: HTML - Finanly You will need to put in some HTML at the point on your page that you wish the slideshow to be. This can be put anywhere. You will of course want to use your images and links.

 


<div id="sshow">
<p><a href="http://yourlink"><img src="http://yourimage"/></a></p>
<p><a href="http://yourlink"><img src="http://yourimage"/></a></p>
<p><a href="http://yourlink"><img src="http://yourimage"/></a></p>
<p><a href="http://yourlink"><img src="http://yourimage"/></a></p>
<p><a href="http://yourlink"><img src="http://yourimage"/></a></p>
</div>



The slide show will treat each <p></p> as a seperate slide and will fade in and out of each one. The example I have here is using images, however you can have text, images or both.

Hopefully this is useful to some of you out there. If you do use it, let me know and I will link you on the blog.

15.08.2007. 14:30

This article hasn't been commented yet.