Forums | MacLife

Sure, it be a breeze.  It is just using prototype.js so all you need to do is add a play button and then use the PeriodicalExecuter() to play the next slide.

The PeriodicalExecuter() function is part of Prototype that works a lot
like the standard setInterval() function, but it accepts seconds as a
second argument, rather than milliseconds

What the hell is it with prototype.js and reinventing the wheel?  It's nice but it's too damn bloated.  But I guess I may as well get used to it, it looks like web applications with hundreds of kilobytes of unused javascript functions are the way of the future.

Couloir.org wrote:

This photo slideshow is a demonstration of Flash-like behavior implemented solely in Javascript, HTML, and CSS.

  .... aaaand Flash.

Miles,
holy crap man! thank you soooo much, i really really appreciate it. it works perfectly.

Miles wrote:

You could I suppose use PeriodicalExecuter, but it doesn't really simplify anything to do so, and apparently there's no way to stop one.

Sure there is you can pause and unpause it.

PeriodicalExecuter is not just a replacement for setInterval, it is integrated into the prototype framework.  So it benefits from from that class and gets things like synchronization.  But in this case doing it manually works just the same.  For larger applications it is beneficial to use it.

Prototype is only 50ish k, not hundreds.  If you add in scriptaculous you are right at about 100k.  That covers most things you need to commonly do and it is easy to extend.  Not really bloat.  The core of is the ajax stuff and object structure, most everything else is only a couple of lines.  Especially if you do a lot of application based stuff, you are using a bulk of the code and get a lot of stuff for free.   

I used to write my own stuff all the time, but more often than not I use prototype and extend where needed.  It is tight and well written.

Miles wrote:

I have to admit, though, that a lot of my distrust for prototype.js is probably uninformed;

Don't get me wrong, it is not perfect.  There are some problems.  The most significant if you write your own stuff and use event handlers. Prototype assumes it is in control of all js.  If you know that it, it isn't a problem.  Extending it is usually more efficient than mixing and matching.

Miles wrote:

I just really don't like the idea of creating all those objects on page load and adding methods to existing objects unnecessarily if they're not all going to be used.  I really should do some benchmarking to see what kind of performance costs are involved with using prototype.js.

You really don't (create a bunch of objects).  They all extend a base class.  Using the periodic updater for example.  It is only a few lines within prototype and is its own object.  If you don't call it the only impact is few lines in your cache.   

And frankly, I don't care about dial up users.  They are getting very rare.  And slow is just part of the dial-up experience.   They are used to waiting.  Additionally if a site is using ajax/dhtml/heavy scripting, a 100k is probably an insignificant chunk as opposed to what else is involved in the site.  Even so, since external scripts are cached is only a one time hit over the course of a site. I am not saying that I go nuts with the images and assume that everyone is using a fat pipe, but it is a balance.  In your example of a dynamic form, even if it were 100k+, you are already making up for it by not forcing page reloads and connects by building on one page. 

And think about the most common sites that would be used by dial up users, GMail, Yahoo mail, etc...  talk about a lot of external code...

I write mostly web applications, some very large in scope.  The one thing that really endears me to prototype is that it is solid and all the cross-platform crap is addressed.  I used to spend so much time testing in browsers getting dynamic stuff to work equally in IE, Safari and FF/Moz.  I rarely have to worry about it any more.  If extend the base stuff I know I am starting on solid ground.

What you want to do is to make the Play code automatically called when the page loads.  Modify the init() function at the end of slideshow.js, which is set to the window.onload event by Behaviour:

// Add window.onload event to initialize
Behaviour.addLoadEvent(init);
Behaviour.apply();
function init() {
    var myPhoto = new Slideshow(photoId);
    myPhoto.initSwap();
    soundManagerInit();
    var next = function () {
        var myPhoto = new Slideshow(photoId);
        myPhoto.nextPhoto();
    }
    playingInterval = window.setInterval(next, 5000);
}

You'll still need to make the modifications listed above, particularly declaring playingInterval and cancelSlideshow(), and calling cancelSlideshow() with the Prev and Next buttons.]

Good luck!

I am new to javascript and had a question about expanding this AWESOME scriptaculous slideshow.  How would I have the slideshow.js script file scan a given directory for images and add them as slides instead of manually entering them into the file?

Thanks,
gomer

Yeah, I didn't think about the js executing on the client-side.  Well, looks like here comes AJAX to the rescue I hope.  I am going to try to create a webmethod that grabs the filelist and see if I can use ClientScript to push it back to the slideshow.js include.

Thanks,
gomer