Using mootools (there is also a moo.fx version available), this javascript slideshow system allows you to have a simple and smooth (cross-fading...) image slideshows and/or showcases on your website.

How to use it ?

To use it, just insert those lines of code in your html files:

In the header

1. Include those lines in your header (external requirements): <script src="scripts/mootools.release.64.js" type="text/javascript"></script>
2. Then include in your header: <!--googleAd-->
   • If you want the timed mode: <script src="scripts/timed.slideshow.js" type="text/javascript"></script>
   • If you want the showcase ("changed by hand") mode: <script src="scripts/showcase.slideshow.js" type="text/javascript"></script>
3. And finally, include the css: <link rel="stylesheet" href="css/jd.slideshow.css" type="text/css" media="screen" />

In your web page

1. This code (here I added 2 elements) to define the slideshow elements:
   <script type="text/javascript">
   countArticle = 0;
   var mySlideData = new Array();
   mySlideData[countArticle++] = new Array(
   'image1.jpg',
   'article1.html',
   'Item 1 Title',
   'Item 1 Description'
   );
   mySlideData[countArticle++] = new Array(
   'image2.jpg',
   'article2.html',
   'Item 2 Title',
   'Item 2 Description'
   );
   </script> As you see, the first argument is the image file (relative to the current document).
   The second one is the url of the page the current element links to.
   The third one is the title, and finally, the last one is the current element's description.
2. Prepare a container for your slideshow:
   <div class="jdSlideshow" id="mySlideshow"></div>
3. Then add this code to launch the slideshow (you can also put it in a separate JS file):
   • If you want the timed mode: <script type="text/javascript">
     function startSlideshow() {
     var slideshow = new timedSlideShow($('mySlideshow'), mySlideData);
     }
     addLoadEvent(startSlideshow);
     </script>
   • If you want the showcase ("changed by hand") mode: <script type="text/javascript">
     function startSlideshow() {
     var slideshow = new showcaseSlideShow($('mySlideshow'), mySlideData);
     }
     addLoadEvent(startSlideshow);
     </script>

In your stylesheets

1. The final step, set the slideshow size in your stylesheets like this (the default size is 320x240):
   #mySlideShow
   {
   width: 400px !important;
   height: 200px !important;
   }

Get it here