Alex Duffield wrote:
> Ken, thanks. This looks great, but unfortunately I cant get it to
> work... Its throwing an error in effects.js setting oldOpacity
>
> I have a minimized test page at
Here is a better version. It does seem to flicker on the last image...
maybe its still not looping exactly right.
--Ken
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: 2,
}, options);
// set the top image source to the first source
this.imgTop.src = this.sources[0];
this.position = 0;
this.onTop = 1;
this.started = false;
},
start: function() {
window.setTimeout(this.next.bind(this),
this.options.showDuration*1000);
this.started = true;
},
stop: function() {
this.started = false;
},
next: function() {
// set the bottom image to the next source
var pos = this.position==this.sources.length-1 ? 0 : this.position+1;
this.imgBottom.src = this.sources[pos];
//console.log('setting imgBottom to pos '+pos+' and fading imgTop');
// fade away the top image to slowly reveal the bottom image
console.log('fading with imgTop = '+this.imgTop.src+', imgBottom =
'+this.imgBottom.src);
new 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];
//console.log('setting imgTop to pos '+this.position);
this.imgTop.show();
// start over
if (this.started) this.start();
}.bind(this)
});
// increment the position, wrapping if needed
this.position++;
if (this.position==this.sources.length) this.position = 0;
}
};
var ss = new SlideShow("imgfront", "imgback", group4);
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
-~----------~----~----~----~------~----~------~--~---
