Have you been to Barack Obama’s website and seen the cool slideshow that he has on his home page? There is actually a splash page that you have to go through first, before you get to the home page. But then you will see it. It looks like this:

Have a Slideshow on your site just like Barack’s!

Well guess what. Thanks to our friend Guillermo Rauch over at devthought.com, you can now have the same slideshow for free! Guillermo has put together a script in Mootools using a bunch of CSS to give you the same type of look and feel and cool slideshow effects that Barack has on his website. The script is fantastic looking and very lightweight so it doesn’t slow loading time up too much. See the Demo Here.

The Creation

Here is a little bit more of an explanation of the slideshow. “I took my previous class (SlideList), and made a few changes here and there. It works with MooTools 1.2, and supports all kinds of shape transformations (top and left coordinates, and height and width properties), which means it can now be used with vertical, horizontal, or even irregular lists. I extended it and came up with a new class that receives the images and loading spinner as parameters (note: it’s arguable whether this is the best decision OOP-wise, but due to the simplicity of this script, this was the right call)

The Code

To ensure all images are loaded before the user makes any interaction, the MooTools Assets component is used. The CSS plays a major role (as in every other animation-focused script). I suggest you analyze it carefully before implementing it in your applications or websites. You’ll probably need to adjust the ids, or use classes instead to keep your stylesheets clean.

The markup is meaningful and simple. Two lists are used (one for the images and the other for the links). The loading element is included in the HTML, but it’s probably better to inject it from the script directly. You can download the files for this slideshow at Guillermo’s Blog at devthought.com

Bookmark To:

Slideshow 2 is an open source Mootools slideshow class for streaming and animating the presentation of images. It’s definitely one of the better looking slideshow’s out there. A very impressive look is given to your images in a much more professional manner. Here’s a screenshot of what it looks like (without mootools of course)

You can choose from a variety of different effects of course which gives you some good flexibility on how you want it to end up looking. The cool thing is that you can input your slideshow via HTML with one simple line of code. The example they give is this:

new Slideshow('show', ['1.jpg', '2.jpg', '3.jpg'], { controller: true, hu: ‘images/’ });

Here are the features as listed in the blog article that featured this tool from webresourcesdepot.com:

• Dynamic resizing - Slideshow can accommodate any size presentation.
• Thumbnails - intelligent, auto-scrolling, tracking, etc.
• Full-featured controller - completely style-able with CSS.
• Animated captions - plain text or formatted with HTML.
• Fully accessible - Slideshow can be controlled with access keys.
• Automagic slideshows - create slideshows from existing HTML images.
• Varied hyperlinking options - allows for mashups with Lightbox, Slimbox, etc.
• CSS slide transitions - designed in stylesheets, not javascript,
  allow for an infinite combination of effects (plus support for all
  Robert Penner transitions).
• Unobtrusive and degradable - Slideshow even functions with Javascript turned off!

So if you are looking for a cool javascript slideshow to add some spice to your website then try this one out. There is some good documentation to help you along the way in customizing it to fit your needs. Enjoy!

Bookmark To: