Slideshow Image 1 Slideshow Image 2 Slideshow Image 3 Slideshow Image 4 Slideshow Image 5
<div id="slideshow" class="pics">
<img src="jqueryslideshow/image1.jpg" alt="Slideshow Image 1" width="525" height="350" />
<img src="jqueryslideshow/image2.jpg" alt="Slideshow Image 2" width="525" height="350" />
<img src="jqueryslideshow/image3.jpg" alt="Slideshow Image 3" width="525" height="350" />
<img src="jqueryslideshow/image4.jpg" alt="Slideshow Image 4" width="525" height="350" />
<a href="http://www.coffeecup.com"><img src="jqueryslideshow/image5.jpg" alt="Slideshow Image 5" width="525" height="350" /></a>
</div>
Paste this code to the Body HTML
Jquery Cycle
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.js"></script>
<style type="text/css">
.pics { height: 382px; width: 557px; padding:0; margin:0; overflow: hidden }
.pics img { height: 350px; width: 525px; padding: 15px; border: 1px solid #ccc; background-color: #eee; top:0; left:0 }
.pics img {
-moz-border-radius: 10px; -webkit-border-radius: 10px;

</style>

<script type="text/javascript">
$('#slideshow').cycle({
fx: 'fade',
timeout: 2000,
speed: 2000,
autostop: 1,

});
</script>
Paste this code to the Header HTML of the same HTML box above
Download these files and unzip them. Now add a folder to your site named js and add the two js files to it.
jquery.min.js
jquery.cycle.all.js
Adjust the timeout and speed to your liking
Back to Progrower.coffeecup.com
Add your images to a folder in VSD. I called mine jqueryslideshow