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.
I use this function to cross fade the image..
var display = function(image){
a = $(''img4'').src
b = image;
// set BG to new image b
$(''box4'').style.background = "url("+b+")"
//fade out current image then swap to new image
new Effect.Fade($(''img4''),{duration: 1, afterFinish:
function() { $
(''img4'').src = b; Effect.Appear($(''img4''),
{duration: .1}) } } );
}
This works great.
What I want to do now is loop through an array of images. When it
gets to the end it starts all over again.
var group4 =
[''/images/spa/Spa1.jpg'',''/images/spa/Spa2.jpg'',''/images/
spa/Spa3.jpg'',''/images/spa/Spa4.jpg'',''/images/spa/Spa5.jpg''];
Any advise on the best way to do this would be appreciated.
Thanks.
______________________________________________________________________
Alex Duffield ❖ Principal ❖ InControl Solutions . http://
www.incontrolsolutions.com
--~--~---------~--~----~------------~-------~--~----~
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
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
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 rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
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 rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
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 didn''t mention that this was untested (I just wrote it :)) The main problem is that this.imgTop = this.sources[0]; should be this.imgTop.src = this.sources[0]; I''ve changed that and retested using firebug, but now i''m getting a scope problem with next()... looking at that now. --Ken --~--~---------~--~----~------------~-------~--~----~ 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 rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
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 atHere 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 rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
Ken Snyder wrote:> 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 >It looks like the flicker comes from your last image source not existing: http://www.galianoliving.com/images/spa/Spa5.jpg you might also want to add some image preloading: initialize: function(...) { ... this.sources.each(this.prefetch); }, prefetch: function(source) { var img = document.createElement(''img''); img.src = source; }, Have fun. Let us know what the final result looks like. --Ken --~--~---------~--~----~------------~-------~--~----~ 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 rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---