JonDesign's Smooth SlideShow Library

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.

Why consider it instead of Flash ?

• Let's imagine you want to add a showcase of your last products, or even a showcase of one product on your homepage. Would you want to restrict it only to the users who have Flash enabled ?
• Another important point is the fact that using this script, you will have fully standard compliant web pages (which is important for accessibility, for example).

Wow cool ! How much does it costs ?

Nothing, it's free as in beer and even better, this library is open-source, GPL licensed to be precise.

Need help ?
Ask on the JonDesign's Smooth Slideshow Users Group:
Browse Archives at groups.google.com

On what browsers does it run ?

Since it's based on the mootools library, it's somehow platform agnostic. I have fully tested it on:

• Firefox
• Opera
• Internet Explorer v6

Users reported successful tests on Safari.

Want to tell me about how it works on other browsers ? Sure! Just contact me by email or by google talk at jonathan.schemoul@gmail.com.

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:
   • 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;
   }