Thomas Fuchs
Hi, I'm Thomas Fuchs. I'm the author of Zepto.js, of script.aculo.us, and I'm a Ruby on Rails core alumnus. With Amy Hoy I'm building cheerful software, like Freckle Time Tracking and Every Time Zone and write books like Retinafy.me.
   Want me to speak at your conference? Contact me!

Simplest Prototype & scripty Slideshow

December 11th, 2009

Here’s a more extended version of my comment on Jonathan Snook’s post on the simplest jQuery Slideshow (good article!).

So here’s my version of the simplest slideshow (done in Prototype/script.aculo.us 1.8), compare to Jonathan’s version in jQuery.

I’ve optimized what’s going on by only fading on element at a time (versus a more processor-hungry crossfade).

The code:

setInterval(function(){
  var imgs = $$('.fadein img'), 
   visible = imgs.findAll(function(img){ return img.visible(); });
  if(visible.length>1) visible.last().fade({ duration: .3 });
    else imgs.last().appear({ duration: .3, 
      afterFinish: function(){ imgs.slice(0,imgs.length-1).invoke('show');  } });
}, 3000);

I don’t really like either my Prototype/scriptaculous nor the jQuery version (which seems too magic for my taste, plus it does two animations at the same time). The main issue with my code is that the CSS has to be reset after a cycle is complete, and this ends up to be quite complicated.

I guess it’s food for thought. :)