Miniature slideshow for DIVs using Scriptaculous


	Miniature slideshow for DIVs using Scriptaculous
brianjlandau
7-12-2006 10:34 AM
746 views
tags:
code, programming, ajax, slideshow, effects, javascript
Add a Comment
Login to Comment. Not a member yet? Sign up
Today's Top Clips

visit the Top Clips page
View the Top Clips from July 12, 2006
Embed This Clip In Your Site...
<div style="margin: 12px 0px; font-family: arial; color: #333333; background: #ffffff; border: solid 4px #e5e5e5; width: 100%; clear: left;"><div class="CM_CTB_Content_Wrap" style="margin: 0px; padding: 0px;background-color: #ffffff;"><div style="border-bottom: solid 1px #dcdcdc; white-space: nowrap; margin-bottom: 8px; background-color: #eeeeee ;background-image: url(http://clipmarks.com/images/source-bg.gif); background-repeat: repeat-x; height: 24px; line-height: 24px; vertical-align: middle; padding-bottom: 4px; color: #666666; font-size: 10px;" ><a href="http://clipmarks.com/clip-to-blog/" title="see clips that are hot right now"><img src="http://content.clipmarks.com/blog_embed/e1ae63b9-cad0-4ff0-b4ad-421396a4572c/C8EFA7A9-F325-4779-8A1C-1238F8B20590/" alt="" width="19" height="19" border="0" style="vertical-align: middle; margin: 0px 4px; display: inline; border: none; float:none;" /></a>clipped from <a title="http://www.bigbold.com/snippets/posts/show/1068" href="http://www.bigbold.com/snippets/posts/show/1068" style="font-size: 11px;">www.bigbold.com</a></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.bigbold.com/snippets/posts/show/1068"><PRE><SPAN class="punct"><</SPAN><SPAN class="ident">div</SPAN> <SPAN class="ident">id</SPAN><SPAN class="punct">="</SPAN><SPAN class="string">slideshow1</SPAN><SPAN class="punct">"</SPAN> <SPAN class="keyword">class</SPAN><SPAN class="punct">="</SPAN><SPAN class="string">slide</SPAN><SPAN class="punct">"><</SPAN><SPAN class="ident">div</SPAN><SPAN class="punct">></SPAN><SPAN class="ident">frame</SPAN> <SPAN class="number">1</SPAN><SPAN class="punct"></</SPAN><SPAN class="regex">div><</SPAN><SPAN class="punct">/</SPAN><SPAN class="ident">div</SPAN><SPAN class="punct">></SPAN>
<SPAN class="punct"><</SPAN><SPAN class="ident">div</SPAN> <SPAN class="ident">id</SPAN><SPAN class="punct">="</SPAN><SPAN class="string">slideshow2</SPAN><SPAN class="punct">"</SPAN> <SPAN class="keyword">class</SPAN><SPAN class="punct">="</SPAN><SPAN class="string">slide</SPAN><SPAN class="punct">"</SPAN> <SPAN class="ident">style</SPAN><SPAN class="punct">="</SPAN><SPAN class="string">display: none</SPAN><SPAN class="punct">"><</SPAN><SPAN class="ident">div</SPAN><SPAN class="punct">></SPAN><SPAN class="ident">frame</SPAN> <SPAN class="number">2</SPAN><SPAN class="punct"></</SPAN><SPAN class="regex">div><</SPAN><SPAN class="punct">/</SPAN><SPAN class="ident">div</SPAN><SPAN class="punct">></SPAN>
<SPAN class="punct"><</SPAN><SPAN class="ident">div</SPAN> <SPAN class="ident">id</SPAN><SPAN class="punct">="</SPAN><SPAN class="string">slideshow3</SPAN><SPAN class="punct">"</SPAN> <SPAN class="keyword">class</SPAN><SPAN class="punct">="</SPAN><SPAN class="string">slide</SPAN><SPAN class="punct">"</SPAN> <SPAN class="ident">style</SPAN><SPAN class="punct">="</SPAN><SPAN class="string">display: none</SPAN><SPAN class="punct">"><</SPAN><SPAN class="ident">div</SPAN><SPAN class="punct">></SPAN><SPAN class="ident">frame</SPAN> <SPAN class="number">3</SPAN><SPAN class="punct"></</SPAN><SPAN class="regex">div><</SPAN><SPAN class="punct">/</SPAN><SPAN class="ident">div</SPAN><SPAN class="punct">></SPAN>
<SPAN class="punct"><</SPAN><SPAN class="ident">div</SPAN> <SPAN class="ident">id</SPAN><SPAN class="punct">="</SPAN><SPAN class="string">slideshow4</SPAN><SPAN class="punct">"</SPAN> <SPAN class="keyword">class</SPAN><SPAN class="punct">="</SPAN><SPAN class="string">slide</SPAN><SPAN class="punct">"</SPAN> <SPAN class="ident">style</SPAN><SPAN class="punct">="</SPAN><SPAN class="string">display: none</SPAN><SPAN class="punct">"><</SPAN><SPAN class="ident">div</SPAN><SPAN class="punct">></SPAN><SPAN class="ident">frame</SPAN> <SPAN class="number">4</SPAN><SPAN class="punct"></</SPAN><SPAN class="regex">div><</SPAN><SPAN class="punct">/</SPAN><SPAN class="ident">div</SPAN><SPAN class="punct">></SPAN>
<SPAN class="punct"><</SPAN><SPAN class="ident">script</SPAN> <SPAN class="ident">type</SPAN><SPAN class="punct">="</SPAN><SPAN class="string">text/javascript</SPAN><SPAN class="punct">"></SPAN>
<SPAN class="ident">start_slideshow</SPAN><SPAN class="punct">(</SPAN><SPAN class="number">1</SPAN><SPAN class="punct">,</SPAN> <SPAN class="number">4</SPAN><SPAN class="punct">,</SPAN> <SPAN class="number">2000</SPAN><SPAN class="punct">);</SPAN>
<SPAN class="ident">function</SPAN> <SPAN class="ident">start_slideshow</SPAN><SPAN class="punct">(</SPAN><SPAN class="ident">start_frame</SPAN><SPAN class="punct">,</SPAN> <SPAN class="ident">end_frame</SPAN><SPAN class="punct">,</SPAN> <SPAN class="ident">delay</SPAN><SPAN class="punct">)</SPAN> <SPAN class="punct">{</SPAN>
        <SPAN class="ident">setTimeout</SPAN><SPAN class="punct">(</SPAN><SPAN class="ident">switch_slides</SPAN><SPAN class="punct">(</SPAN><SPAN class="ident">start_frame</SPAN><SPAN class="punct">,</SPAN><SPAN class="ident">start_frame</SPAN><SPAN class="punct">,</SPAN><SPAN class="ident">end_frame</SPAN><SPAN class="punct">,</SPAN> <SPAN class="ident">delay</SPAN><SPAN class="punct">),</SPAN> <SPAN class="ident">delay</SPAN><SPAN class="punct">);</SPAN>
    <SPAN class="punct">}</SPAN>
<SPAN class="ident">function</SPAN> <SPAN class="ident">switch_slides</SPAN><SPAN class="punct">(</SPAN><SPAN class="ident">frame</SPAN><SPAN class="punct">,</SPAN> <SPAN class="ident">start_frame</SPAN><SPAN class="punct">,</SPAN> <SPAN class="ident">end_frame</SPAN><SPAN class="punct">,</SPAN> <SPAN class="ident">delay</SPAN><SPAN class="punct">)</SPAN> <SPAN class="punct">{</SPAN>
        <SPAN class="keyword">return</SPAN> <SPAN class="punct">(</SPAN><SPAN class="ident">function</SPAN><SPAN class="punct">()</SPAN> <SPAN class="punct">{</SPAN>
            <SPAN class="constant">Effect</SPAN><SPAN class="punct">.</SPAN><SPAN class="ident">Fade</SPAN><SPAN class="punct">('</SPAN><SPAN class="string">slideshow</SPAN><SPAN class="punct">'</SPAN> <SPAN class="punct">+</SPAN> <SPAN class="ident">frame</SPAN><SPAN class="punct">);</SPAN>
            <SPAN class="keyword">if</SPAN> <SPAN class="punct">(</SPAN><SPAN class="ident">frame</SPAN> <SPAN class="punct">==</SPAN> <SPAN class="ident">end_frame</SPAN><SPAN class="punct">)</SPAN> <SPAN class="punct">{</SPAN> <SPAN class="ident">frame</SPAN> <SPAN class="punct">=</SPAN> <SPAN class="ident">start_frame</SPAN><SPAN class="punct">;</SPAN> <SPAN class="punct">}</SPAN> <SPAN class="keyword">else</SPAN> <SPAN class="punct">{</SPAN> <SPAN class="ident">frame</SPAN> <SPAN class="punct">=</SPAN> <SPAN class="ident">frame</SPAN> <SPAN class="punct">+</SPAN> <SPAN class="number">1</SPAN><SPAN class="punct">;</SPAN> <SPAN class="punct">}</SPAN>
            <SPAN class="ident">setTimeout</SPAN><SPAN class="punct">("</SPAN><SPAN class="string">Effect.Appear('slideshow</SPAN><SPAN class="punct">"</SPAN> <SPAN class="punct">+</SPAN> <SPAN class="ident">frame</SPAN> <SPAN class="punct">+</SPAN> <SPAN class="punct">"</SPAN><SPAN class="string">');</SPAN><SPAN class="punct">",</SPAN> <SPAN class="number">850</SPAN><SPAN class="punct">);</SPAN>
            <SPAN class="ident">setTimeout</SPAN><SPAN class="punct">(</SPAN><SPAN class="ident">switch_slides</SPAN><SPAN class="punct">(</SPAN><SPAN class="ident">frame</SPAN><SPAN class="punct">,</SPAN> <SPAN class="ident">start_frame</SPAN><SPAN class="punct">,</SPAN> <SPAN class="ident">end_frame</SPAN><SPAN class="punct">,</SPAN> <SPAN class="ident">delay</SPAN><SPAN class="punct">),</SPAN> <SPAN class="ident">delay</SPAN> <SPAN class="punct">+</SPAN> <SPAN class="number">850</SPAN><SPAN class="punct">);</SPAN>
        <SPAN class="punct">})</SPAN>
    <SPAN class="punct">}</SPAN>
<SPAN class="punct"></</SPAN><SPAN class="regex">script></SPAN></PRE></blockquote></div><div style="margin: 0px 6px 6px 4px;"><table style="font-size: 11px;border-spacing: 0px;padding: 0px;" cellpadding="0" cellspacing="0" width="100%"><tr><td style="background:transparent;border-width:0px;padding:0px;">&nbsp;</td><td align="right" style="background:transparent;border-width:0px;padding:0px;width:107px" width="107"><a href="http://clipmarks.com/share/C8EFA7A9-F325-4779-8A1C-1238F8B20590/blog/" title="blog or email this clip"><img src="http://content6.clipmarks.com/images/c2b-foot.png" border="0" alt="blog it" width="107" height="17" style="border-width:0px;padding:0px;margin:0px;" /></a></td></tr></table></div></div>
New from the makers of Clipmarks: Amplify.com - Don't just share the news...Amplify it!
Clipmarks: Home; New Clips; Top Clips; Dashboard
Popular Topics: News; Life; Science; Technology; Entertainment
Get Started: Sign Up; Install Clipping Tool; How Clipping Works; Clip-to-Blog™; ClipSearch
Tools and Resources: FAQ; ClipWeek; Top Clippers; Top Tags; Site Map
About Clipmarks: About Us; Contact; Copyright; Privacy; EULA
Search Options

Today's Top Clips
