Alex Duffield wrote:
> I am trying to do a simple looping slide show. All images are the same
> size/aspect ratio So my set up is a div with an image in it. The div
> is set to the same size as the image.
> ...
>
> What I want to do now is loop through an array of images. When it gets
> to the end it starts all over again.
> ...
>
Sounds interesting... My approach is below. -- Ken Snyder
var SlideShow = Class.create();
SlideShow.prototype = {
// using css, set imgNodeTop and imgNodeBottom to the same position
using top and left
// then set imgNodeTop's z-index to be higher
// also pass in an array of the sources
initialize: function(imgNodeTop, imgNodeBottom, imageSources, options) {
// internally store the given values
this.imgTop = $(imgNodeTop);
this.imgBottom = $(imgNodeBottom);
this.sources = imageSources;
this.options = Object.extend({
fadeDuration: 1,
showDuration: 8,
}, options);
// set the top image to the first source
this.imgTop = this.sources[0];
this.position = 1;
this.onTop = 1;
},
start: function() {
setTimeout(this.next().bind(this), this.options.showDuration);
},
next: function() {
// set the bottom image to the next source
this.imgBottom.src = this.sources[this.position];
// fade away the top image to slowly reveal the bottom image
Effect.Fade(this.imgTop, {
duration: this.options.fadeDuration,
afterFinish: function() {
// when finished, set the top image to the last image (hopefully
it won't flicker)
this.imgTop.src = this.sources[this.position-1];
this.imgTop.show();
// start over
this.start();
}.bind(this)
});
// increment the position, wrapping if needed
this.position++;
if (this.position>this.sources.length) this.position = 0;
}
};
Then just do:
var ss = new SlideShow(...);
ss.start();
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "Ruby
on Rails: Spinoffs" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
