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 http://www.galianoliving.com/slideshow.php Any advise on whats wrong would be great!! ______________________________________________________________________ Alex Duffield ❖ Principal ❖ InControl Solutions . http:// www.incontrolsolutions.com On 28-Jun-07, at 8:40 AM, Ken Snyder wrote: > 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 -~----------~----~----~----~------~----~------~--~---
