Wednesday, October 11th, 2006

Smooth Slideshow 2.0

Category: JavaScript, Library, Utility

Jonathan Schemout has released version 2 of his Smooth Slideshow library, written on top of mootools.

New Features in 2.0

  • All the code is now wrapped in objects. In other words, you can now add more than one slideshow to the same webpage.
  • JonDesign’s SmoothSlideshow now center images in the viewport. This way you can use different image ratio in the same slideshow.
  • JDSS 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.

You can see this in action via the showcase.

Download SmoothSlideshow 2.0

Smooth Slideshow

Posted by Dion Almaer at 8:12 am

4.4 rating from 38 votes


Comments feed TrackBack URI

not checked out the code yet but this is pretty sweet!

Comment by S Rimell — October 11, 2006

The previous one was one of my favorites. Glad to see that there’s a “sequel”… Great work.

Comment by chesare — October 11, 2006

This is pretty cool. I have a quick question. The initialize function creates div element for all the images in the beginning. Would it download all the images at once? I assume it won’t. Just wanted to confirm.


Comment by Thiru — October 11, 2006

great stuff

Comment by bdzuver — October 11, 2006

It keeps getting better and better…

Comment by — October 11, 2006

[…] Ajaxian pointed to new photo slideshow software, called Smooth Slideshow. I have my own slideshow software, but I may end up 'stealing' some of the ideas from this, because I think it's a really nice implementation AND it validates! […]

Pingback by Just Shelley » Gems — October 11, 2006

Great slideshow for sure. something like our own lightbox but definitely with better caption from moo camp.

Comment by Google Logs — October 11, 2006

Smooth SlideShow 2.0

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.
Jonathan Schemout lançou a segunda versão da S…

Trackback by Carlos Castro Alves — October 11, 2006

JonDesign’s Smooth Slideshow is very very nice ! We can now stop using some useless Flash…
Vive Ajaxian, vive Jon et vive la France !

Comment by Guillaume — October 12, 2006

One note: ‘fully tested on Firefox’ seems to mean ‘fully tested on Firefox 1.5’.
…I don’t actually know which version is tested, but I do know it’s not 1.0.7, and that cuts too many users, imho :-\ Looking good on IE, though.

Comment by emarc — October 12, 2006

i really want to use this in production.
there are some issues though and maybe bugs.
i get a lot of “Error: ‘this.slideElements’ is null or not an object” messages when i slide right (sliding left seem to work fine).

so basically i am looking for a mailing list or a forum where i can post questions and get some help regarding this awesome component.

thanks in advance.

Comment by guy — October 12, 2006

I noticed that all the images are created with div elements in the initialize function. Does that mean it will load all the images before it is being shown? I don’t think so, but just want to confirm


Comment by Thiru — October 12, 2006

Thnx for the tip. Nice slideshow. Ive same question as Thiru.. Are all pics load before shown..?

PS: I don’t see any problems with ff..

Comment by rxbbx — October 12, 2006

the slideshow is broken with IE7!!!!!
the title and description of the picture does not appear

anyone encountered this? and can solve this?
thanks in advacne.

Comment by guy — October 15, 2006

there was a problem with the CSS or JS.
2 ways to solve this.
wither change the jd.slideshow.css and set the height to something bigger than 3 (in my case 40 worled) in the .jdSlideshow .slideInfoZone selector or change line 167 (this.slideInfoZone.getStyle(‘height’, true)) to a number (40)

Comment by guy — October 15, 2006

Hello Everybody,

First, my name is not Jonathan Schemout, but Jonathan Schemoul ;-)

Anyway, thanks for the great feedback !
So, the answers to the people here who asked questions:

@thiru, @rxbbx:
Normally, images should load from the beginning in the order they are shown… but with very low priority for the browser: hidden css images…
So kind of preloading, yeah :)

I’ve done some testing on firefox 1.0.7 on linux and firefox 1.5 on both linux and windows (as well as firefox 2.0) and it worked… maybe there are some problems on other platforms. BTW, the move to mootools and objects removed some compatiblities, try the moo.fx version (or even v1 which wasn’t using objects) :)

those problems come from the use of em sizes for the info panel: convert everything to px, and it should work :)
(btw, the JS code you say to change, actually gets the current height of the element… maybe this function of mootools is broken on IE 7… the moo.fx version perhaps correct this thing. I can’t test since I don’t use IE 7)

I am about to set up a google groups to discuss about the lib and prepare the next version as well as it’s variant: JonDesign’s SmoothGallery.

Thanks for this article and fedback :)
— Jon

Comment by Jonathan Schemoul — October 15, 2006


Just to inform you all that I’ve opened a google group to discuss about issues, improvements or implementations of JonDesign’s SmoothSlideshow:


Comment by Jonathan Schemoul — October 20, 2006

Leave a comment

You must be logged in to post a comment.