BarackSlideshow - An elegant, lightweight slideshow script
I guess pretty much everyone has seen Barack Obama’s website by now, which is clearly one of the prettiest of all candidates we’ve heard of so far. Not only is it an example of state-of-the-art design, but it’s also nice to navigate and interact with.
I decided to imitate the homepage slideshow. I had already experimented with similar animated lists, which allowed me to have it ready within minutes
The creation
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.
The pictures
The beautiful pictures were taken from Flickr with permission of the owners, unless they were directly released for non-commercial use. Thanks vgm8383, dogonnit, M. TANIGUCHI, GustavoBuriola & others!
The demo
Click here to see it in action or download itTags: on June 11th, 2008
September 17th, 2008 at 5:07 am
[...] BarackSlideshowAn elegant, lightweight slideshow script. 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. [...]
September 17th, 2008 at 4:41 am
[...] BarackSlideshow Un elegante y ligero script para realizar presentaciones de fotografías con MooTools 1.2. [...]
September 15th, 2008 at 7:34 pm
Hi, I was wondering if you could explain your “show” function. Specifically:
image.dispose().fade(’hide’).inject(this.curimage || this.images.getFirst(), this.curimage ? ‘after’ : ‘before’).fade(’in’);
image.getElement(’img’).setStyle(’display’, ‘block’);
$pick(this.curimage, image).get(’tween’).chain(function() { this.fireEvent(’onShow’, image); }.bind(this));
I’m writing a simple image slideshow (on a timer) and you seem to have a great solution. I just can’t figure it out.
Thanks
September 15th, 2008 at 1:39 pm
[...] Devthought - Guillermo Rauch’s Blog » BarackSlideshow - An elegant, lightweight slideshow script (tags: webdesign tutorial web2.0 resources tools jquery photo javascript) [...]
September 14th, 2008 at 9:09 pm
Hey guys, this is just plain old beautiful.
Im trying to implement this into Sharepoint for our organization.
I was just wondering if anyone has tried this and been successful?
The problem im having is that when you click on one of the items it loads the picture in a new window instead on inline like it should
Any suggestions would be great
September 14th, 2008 at 2:45 pm
thanks for this inspiration
September 14th, 2008 at 1:03 pm
[...] BarackSlideshow An elegant, lightweight slideshow script. 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. [...]
September 14th, 2008 at 6:42 am
[...] BarackSlideshowAn elegant, lightweight slideshow script. 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. [...]