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:

Oh boy have I been looking for something like this for a long long time! And I am just thrilled that it is Open Source! The Open Source world delivers again. This time with a flash Product Color Changer. Click on the link to see a demo of what it actually does. Basically this tool enables you to present the color variations of your product in simple and nifty way.

An Ecommerce Solution like None Other
I can’t tell you how many people over the years have asked me to build them functionality inn their ecommerce store similar to Nike and their shoe store. I’m not sure if they still have it, but in the past Nike would allow you to customize your shoe by color and a few other things. A very neat function that helps give the customer a better ability to “Shop” on your shopping cart website.

Below is just a screenshot of what this script does. Oh by the way, the script uses XML so that you can easily embed it into any CMS or Ecommerce solution.

Download the Open Source Product Color Changer!

Bookmark To:

Are you looking for a free solution to a Javascript Image Rotator? I have been looking for this lately and found something that I think you all will enjoy using. It’s called the JW Image Rotator and it’s from jeroenwijering.com. For a recent project I needed a quick, good looking solution to a Image Rotator with a cool transition without needing flash. I came across this and it worked perfectly for me.

Installation Instructions
Download the JW Image Rotator from the website. The rotator download ZIP contains all you need to get started. First, transfer the imagerotator.swf and imagerotator.xml file from the ZIP to your website. Also upload all photos you want to show to your site.

Second, change the imagerotator.xml file so that it contains the titles, links and image urls of your images. You can use a simple text editor for that. If you want to add more photos, just copy-paste additional track blocks in he .xml file.

Third, embed the rotator in your HTML page with this line of code. If you place the files in different directories, make sure to set the references in this embed code accordingly:

<embed
  src="imagerotator.swf"
  width="470"
  height="160"
  allowscriptaccess="always"
  flashvars="file=imagerotator.xml&transition=blocks"
/>

The flashvars parameter can contain a list of variables for configuring the rotator. To quickly get the ones you want, read through the Wiki page with all flashvars. Choose the variables you want and insert their names/values in your page. That’s all!

Bookmark To: