Hi, I'm Thomas Fuchs. I'm the author of the script.aculo.us user interface JavaScript library, a member of the Prototype core team and a Ruby on Rails core alumnus. You're using my work every day, even if you're not aware of it (sounds creepy, I know!). Need JS foo? Hire me.

Simplest Prototype & scripty Slideshow

December 11th, 2009 by Thomas Fuchs, 4 comments »

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.

Tweet This Post Digg This Post Share on Facebook

4 comments »

Do you run a web site or web application? Do your users a favor, and grab our ebook on JavaScript performance. Profit from our knowledge gathered in over 15 years of working with the Web and JavaScript and make your sites ultra-fast and your users ultra-happy.

4 Comments on “Simplest Prototype & scripty Slideshow”

1 Radoslav Stankov said at 8:32 pm on December 11th, 2009:
Looks nice, I use such quick liners for rapid prototyping ( I had 5 – line tab panel ). If you want to make it even smaller you could replace img.visible() function with Element.visible
2 sethaurus said at 11:27 am on December 12th, 2009:
I think the fact that you find the jQuery version ‘too magic’ is indicative of the philosophical differences between JQ and Protoype/Scripty, rather than an objective problem with Simon’s code. I used to find jQuery code unnecessarily terse and illegible, especially when it employed `.end()` call-chaining, but gradually it has come to seem natural to me. The Prototype coding style encourages idiomatic javascript, with named variables and ordinary control structures, whereas the jQuery style is more like a little DSL for the DOM, where logic is done in call-chaining and verbosity is considered redundant.
3 Simplest jQuery And Prototype Slideshows | Free Web Resources said at 12:03 pm on December 13th, 2009:
[...] that, Thomas Fuchs, the author of the script.aculo.us, has also created one using Prototype & Scripty [...]
4 qFox said at 10:43 pm on December 22nd, 2009:
Here’s my version: http://qfox.nl/weblog?181.

Slideshows are all about fading these days. The rest is sugar…