What does it look like ?

JonDesign's Smooth SlideShow Library

Warning! SmoothSlideshow became Smooth Gallery. Go check it out.

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 a Flash-based solution ?

  • 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.

What's new in version 2.1 ?

This version is a minor evolution of the v2 (you can see it's changelog below).

Yeah ok, I understood that, but what changed ?

  • First, as some of you asked for it, a moo.fx 2 version is available !
  • Also, SmoothSlideshow now works perfectly in internet explorer 7 and firefox 1.0 (corrected bug due to a bad handling of em heights in IE7),
  • Well, because not everybody have an adsl connection, there is now a little preloader included !
  • And, of course, some other bugfixes.

Changes in version 2.0

While maintaining nearly the same installation steps, a major rethinking of the internal architecture has been done in this version.

Now, what changed exactly ?

  • All the code is now wrapped in objects, permitting you to put more than one slideshow at a time in the same webpage.
  • Images don't have to be at the same size as the slideshow. This way you can use different image ratio for one instance of smoothslideshow.
  • JonDesign's SmoothSlideshow now uses mootools instead of moo.fx and prototype.lite.js (but don't worry, there is still a version using moo.fx available ;-))
  • Some graphical changes (yeah everyone wants to look cool :-))
  • And last but not least, a lot of bugfixes.

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.83.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;
    }

Where can I get it ?

Download the compressed archive (including mootools revision 83)

Want to use it with moo.fx (version 2) instead of mootools ? Sure! Download this version (including moo.fx and prototype.lite.js):

You are still using moo.fx version 1 on your website and can't upgrade yet ? We ported some bugfixes from the 2.1 version to the legacy moo.fx v1 version !