Hi there,
I found this snippet: http://snippets.dzone.com/posts/show/1068
I modified it very slightly to suit my needs, but I''m really not that
knowledgeable about JS so I''m looking for help from the community.
I''d like it to loop forever (and possibly randomize the slide order).
I think making it loop will fix the couple errors that show in Firebug
at the end of the loop. "element has no properties" for Appear and
Fade.
Here''s my code:
<div id="slideshow">
<div id="slideshow0" class="slide"><img
src="/wp-content/images/
slideshow/1.jpg" /></div>
<div id="slideshow1" class="slide" style="display:
none;"><img src="/
wp-content/images/slideshow/2.jpg" /></div>
<div id="slideshow2" class="slide" style="display:
none;"><img src="/
wp-content/images/slideshow/3.jpg" /></div>
<div id="slideshow3" class="slide" style="display:
none;"><img src="/
wp-content/images/slideshow/4.jpg" /></div>
<div id="slideshow4" class="slide" style="display:
none;"><img src="/
wp-content/images/slideshow/5.jpg" /></div>
<div id="slideshow5" class="slide" style="display:
none;"><img src="/
wp-content/images/slideshow/6.jpg" /></div>
<script type="text/javascript">
start_slideshow(0, 6, 4000);
function start_slideshow(start_frame, end_frame, delay) {
setTimeout(switch_slides(start_frame,start_frame,end_frame,
delay), delay);
}
function switch_slides(frame, start_frame, end_frame, delay) {
return (function() {
Effect.Fade(''slideshow'' + frame);
if (frame == end_frame) { frame = start_frame; } else
{ frame = frame + 1; }
setTimeout("Effect.Appear(''slideshow" + frame +
"'');",
850);
setTimeout(switch_slides(frame, start_frame, end_frame,
delay), delay + 850);
})
}
</script>
</div>
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---
There was a photography site I shameless got inspired from and used it to have rotating images at the top of my site. Its spaced out, but only by css. The effect applies. I believe the credits are sitting in the Javascripts. http://www.zeuscomics.com On Apr 19, 1:32 pm, Lorin Rivers <lriv...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> Hi there, > > I found this snippet:http://snippets.dzone.com/posts/show/1068 > > I modified it very slightly to suit my needs, but I''m really not that > knowledgeable about JS so I''m looking for help from the community. > > I''d like it to loop forever (and possibly randomize the slide order). > > I think making it loop will fix the couple errors that show in Firebug > at the end of the loop. "element has no properties" for Appear and > Fade. > > Here''s my code: > <div id="slideshow"> > <div id="slideshow0" class="slide"><img src="/wp-content/images/ > slideshow/1.jpg" /></div> > <div id="slideshow1" class="slide" style="display: none;"><img src="/ > wp-content/images/slideshow/2.jpg" /></div> > <div id="slideshow2" class="slide" style="display: none;"><img src="/ > wp-content/images/slideshow/3.jpg" /></div> > <div id="slideshow3" class="slide" style="display: none;"><img src="/ > wp-content/images/slideshow/4.jpg" /></div> > <div id="slideshow4" class="slide" style="display: none;"><img src="/ > wp-content/images/slideshow/5.jpg" /></div> > <div id="slideshow5" class="slide" style="display: none;"><img src="/ > wp-content/images/slideshow/6.jpg" /></div> > <script type="text/javascript"> > start_slideshow(0, 6, 4000); > function start_slideshow(start_frame, end_frame, delay) { > setTimeout(switch_slides(start_frame,start_frame,end_frame, > delay), delay); > } > > function switch_slides(frame, start_frame, end_frame, delay) { > return (function() { > Effect.Fade(''slideshow'' + frame); > if (frame == end_frame) { frame = start_frame; } else > { frame = frame + 1; } > setTimeout("Effect.Appear(''slideshow" + frame + "'');", > 850); > setTimeout(switch_slides(frame, start_frame, end_frame, > delay), delay + 850); > }) > } > > </script> > </div>--~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---
Interesting. I guess it didn''t show up in my search because of the Dutch language. I''ll check it out. On Apr 19, 3:48 pm, chrispostfuture <chrispostfut...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> There was a photography site I shameless got inspired from and used it > to have rotating images at the top of my site. Its spaced out, but > only by css. The effect applies. I believe the credits are sitting > in the Javascripts. > > http://www.zeuscomics.com > > On Apr 19, 1:32 pm, Lorin Rivers <lriv...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote: > > > Hi there, > > > I found this snippet:http://snippets.dzone.com/posts/show/1068 > > > I modified it very slightly to suit my needs, but I''m really not that > > knowledgeable about JS so I''m looking for help from the community. > > > I''d like it to loop forever (and possibly randomize the slide order). > > > I think making it loop will fix the couple errors that show in Firebug > > at the end of the loop. "element has no properties" for Appear and > > Fade. > > > Here''s my code: > > <div id="slideshow"> > > <div id="slideshow0" class="slide"><img src="/wp-content/images/ > > slideshow/1.jpg" /></div> > > <div id="slideshow1" class="slide" style="display: none;"><img src="/ > > wp-content/images/slideshow/2.jpg" /></div> > > <div id="slideshow2" class="slide" style="display: none;"><img src="/ > > wp-content/images/slideshow/3.jpg" /></div> > > <div id="slideshow3" class="slide" style="display: none;"><img src="/ > > wp-content/images/slideshow/4.jpg" /></div> > > <div id="slideshow4" class="slide" style="display: none;"><img src="/ > > wp-content/images/slideshow/5.jpg" /></div> > > <div id="slideshow5" class="slide" style="display: none;"><img src="/ > > wp-content/images/slideshow/6.jpg" /></div> > > <script type="text/javascript"> > > start_slideshow(0, 6, 4000); > > function start_slideshow(start_frame, end_frame, delay) { > > setTimeout(switch_slides(start_frame,start_frame,end_frame, > > delay), delay); > > } > > > function switch_slides(frame, start_frame, end_frame, delay) { > > return (function() { > > Effect.Fade(''slideshow'' + frame); > > if (frame == end_frame) { frame = start_frame; } else > > { frame = frame + 1; } > > setTimeout("Effect.Appear(''slideshow" + frame + "'');", > > 850); > > setTimeout(switch_slides(frame, start_frame, end_frame, > > delay), delay + 850); > > }) > > } > > > </script> > > </div>--~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---
On Apr 20, 4:32 am, Lorin Rivers <lriv...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> Hi there, > > I found this snippet:http://snippets.dzone.com/posts/show/1068 > > I modified it very slightly to suit my needs, but I''m really not that > knowledgeable about JS so I''m looking for help from the community. > > I''d like it to loop forever (and possibly randomize the slide order). > > I think making it loop will fix the couple errors that show in Firebug > at the end of the loop. "element has no properties" for Appear and > Fade. > > Here''s my code: > <div id="slideshow"> > <div id="slideshow0" class="slide"><img src="/wp-content/images/ > slideshow/1.jpg" /></div> > <div id="slideshow1" class="slide" style="display: none;"><img src="/[...]> <div id="slideshow5" class="slide" style="display: none;"><img src="/ > wp-content/images/slideshow/6.jpg" /></div> > <script type="text/javascript"> > start_slideshow(0, 6, 4000); > function start_slideshow(start_frame, end_frame, delay) { > setTimeout(switch_slides(start_frame,start_frame,end_frame, > delay), delay); > } > > function switch_slides(frame, start_frame, end_frame, delay) { > return (function() { > Effect.Fade(''slideshow'' + frame); > if (frame == end_frame) { frame = start_frame; } else > { frame = frame + 1; }The ''element has no properties'' error is from here. Your "frames" are numbered 0-5, end_frame is set to 6 so when frame is 5, you bump it to 6 then try to access slideshow6, which doesn''t exist. It is much better to base your slideshow on an array, particularly if you want to radomise the order. e.g. instead of using a frame number, give the function a range (in this case 0-5) and use a randomising function: function randomNumber(a, z){ var d = (z-a)+1; return (Math.random()*d+a)|0; // returns an integer } But you may get the same image two, three or more times in a row (after all, it really is random). There are other ways of ensuring that you get a random pattern of non-repeating images, e.g. copy an array of images references, get a random number based on the array length, then slice that element from the array when it is used for display. When the array is empty, get a new copy. As numbers are removed from the copy as they are used, they can''t repeat until all the images are used. Of course the last image displayed might be the first one next time... -- Rob --~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---