Easy Scriptaculous Slideshow

obie : January 19th, 2006

This took a little while to get working properly earlier this week, so I figured I'd share the love...

var album = { 
  startup: function() { 
    new PeriodicalExecuter(album.cycle, 5) // change image every 5 seconds 
  }, 
  cycle: function() { 
    new Effect.Fade('image', { // the id of the <DIV> containing the photos 
      duration: 1, 
      fps: 50, 
      afterFinish: function() { 
        new Ajax.Updater('image','/album/next', { // URL for next <IMG> tag 
          asynchronous: true, 
          onSuccess: function() { 
            new Effect.Appear('image', {
              duration: 1,
              fps: 50,
              queue:'end'
            })
          } 
        }) 
      } 
    }) 
  } 
} 
 
window.onload = album.startup

I don't generally advertise that I wrote thousands and thousands of lines of JavaScript in the 2001-2003 time period, most of it nice and clean like the Prototype library. I even tried to open source my work and was threatened with a lawsuit. (Get me drunk and I might share some of that story!) But anyway, after a long time of wanting to avoid it, I am realizing that one of the biggest reasons I took to Ruby so strongly is because I was already accustomed to programming with closures.

I post regularly about Ruby and other stuff on my blog, but I expect to be adding Ruby and JavaScript tips and tricks to this one more often.

Posted by obie Filed in

13 Responses to “Easy Scriptaculous Slideshow”

  1. Marcus Says:
    January 20th, 2006 at 04:06 AM is there an example somewhere? looks like it could be really cool :)
  2. Lee O'Mara Says:
    January 20th, 2006 at 05:24 AM What about front-loading the URL request so that slow server responses don't cause some images to get short-changed?
  3. Peter Cooper Says:
    January 30th, 2006 at 02:09 PM Re: front-loading.. I dare say you could use an earlier event to load into an Image to pre-cache, then do a simple switch on the afterFinish.
  4. anu Says:
    February 3rd, 2006 at 05:20 AM Hi How is the "/album/next" supposed to be used. I have a folder full of images which I need to display within in a partial in my page.
  5. Mosey Says:
    March 7th, 2007 at 09:15 PM

    Your code gave me Lisp flashbacks. Thanks! ||| @^@ ~o

  6. Matt Says:
    March 22nd, 2007 at 02:57 PM

    I’m a little confused how to implement this . Not sure about the new Ajax.Updater(‘image’,’/album/next’, { // URL for next tag

    how does this work ? ?

  7. Anne Says:
    April 26th, 2007 at 05:18 AM

    The code looks good (nicely laid out), BUT there is no demo of it actually working somewhere and it lacks information as to how to implement it. This is notably the case on how the URL for the next tag is set up, and this in spite of people asking for more information.

    This appears to be a common practice with javascript coders (along with over-use of global variables, which makes things even worse) : 0 documentation.

    Why bother ?

  8. Graham Says:
    June 7th, 2007 at 09:51 PM

    The /album/next bit should call a script that outputs the next tag.

    See this example I made using this script http://play.swordfoxdesign.co.nz/slideshow/

    Easy..

    Graham

  9. Jeremy Helms Says:
    June 19th, 2007 at 04:02 PM

    Love the snippet; would love it even more if the image.php source was available (would probably solve the repetative questions about /album/next too).

  10. aaa Says:
    July 20th, 2007 at 12:35 AM

    http://play.swordfoxdesign.co.nz/slideshow/ is a broken link. <sigh>

  11. Antonie Potgieter Says:
    July 22nd, 2007 at 04:26 AM

    Thank you for the great snippet! For those who wonder what “/album/next” means…it’s the URL which will be requested by the Ajax.Updater object. The first parameter which is an element with the ID “image” will be updated with the data retrieved from this URL.

  12. aaa Says:
    July 23rd, 2007 at 08:51 PM

    Thanks, Antonie. But how does the /album/next part actually work? Shouldn’t it be” /image/path/nextimage.php”?

    Can you give us an example PHP file script?

  13. jay Says:
    July 23rd, 2007 at 10:38 PM

    Hey, how about if I want the transition to be image-to-image, instead of image-to-blank-to-image? Anybody clever enough to do that?

Sorry, comments are closed for this article.