Slideshow1

<body topmargin=0 leftmargin=0 marginheight=0 marginwidth=0> <table cellpadding=0 cellspacing=0 border=0><tr> <td valign="top" height=50 BGCOLOR="#660099" TEXT="#080000"> <div> <TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="725" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="VOID" RULES="NONE" ALIGN="LEFT" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=CENTER HEIGHT= 33 ><NOBR><div> <B>Sami's Site: CSB - Trellix Support and Tests</B></div> </NOBR></tD> <tD VALIGN=CENTER WIDTH="71"><div> <A HREF="id109.htm" TARGET="_top" TITLE="Other applets"><IMG SRC="640070e0.png" border=0 width="7" height="14" ALT="previous" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></A>  <IMG BORDER="0" SRC="1x1.gif" HEIGHT="14" ALIGN="BOTTOM" HSPACE="0" VSPACE="0" WIDTH="14">  <A HREF="id127.htm" TARGET="_top" TITLE="Slideshow2"><IMG SRC="642070e0.png" border=0 width="7" height="14" ALT="next" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></A></div> </tD> <tD VALIGN=CENTER><NOBR><div> <DIV style="TEXT-ALIGN: center"> <STYLE type=text/css> #rollbutton a { color: #C0DCC0; font-size:12px; font-weight: bold; text-decoration: none; border:2px outset #D3D3D3; background-color:#680098; display: block; width: 85px; height: 19px; padding: 0px; } #rollbutton a:hover { background-color: #C0DCC0; color:#680098; padding-left: 3px; border:2px inset #D3D3D3; } </STYLE> <DIV id=rollbutton> <A href="http://www.samisite.com" title="Samisite.com Home Page" target="_top" onfocus="this.blur()">HOME</A> <A href="http://www.forum.samisite.com" title="Visit the Samisite Webmaster Community Forum" target="_top" onfocus="this.blur()">FORUM</A></DIV> </DIV></div> </NOBR></tD> </tR> </TABLE></div> <bR> <div> </div> </td> </tr><tr> <td valign="top" height=430 BGCOLOR="#DDDDDD" TEXT="#080000"> <div> <STYLE>  </STYLE><A HREF="index.htm" TARGET="_top" TITLE="Test Index">Test Index</A><FONT SIZE="1" COLOR="#330066" FACE="Symbol" >   ·   </FONT><A HREF="id93.htm" TARGET="_top" TITLE="Photo Borders">Photo Borders</A><FONT SIZE="1" COLOR="#330066" FACE="Symbol" >   ·   </FONT><A HREF="id125.htm" TARGET="_top" TITLE="Table of sliced images Rounded corners">Table of sliced images - Rounded corners</A><FONT SIZE="1" COLOR="#330066" FACE="Symbol" >   ·   </FONT><A HREF="sliceandlink.htm" TARGET="_top" TITLE="Sliced images and manually linked">Sliced images and manually linked</A><FONT SIZE="1" COLOR="#330066" FACE="Symbol" >   ·   </FONT><A HREF="id129.htm" TARGET="_top" TITLE="Overlap Images">Overlap Images</A><FONT SIZE="1" COLOR="#330066" FACE="Symbol" >   ·   </FONT><A HREF="id128.htm" TARGET="_top" TITLE="Create a Watermark">Create a Watermark</A><FONT SIZE="1" COLOR="#330066" FACE="Symbol" >   ·   </FONT><A HREF="id35.htm" TARGET="_top" TITLE="Gif Png Transparency">Gif Png Transparency</A><FONT SIZE="1" COLOR="#330066" FACE="Symbol" >   ·   </FONT><A HREF="id138.htm" TARGET="_top" TITLE="ButtonsImage Links">Buttons-Image Links</A><FONT SIZE="1" COLOR="#330066" FACE="Symbol" >   ·   </FONT><A HREF="id136.htm" TARGET="_top" TITLE="Image Names">Image Names</A><FONT SIZE="1" COLOR="#330066" FACE="Symbol" >   ·   </FONT><A HREF="id139.htm" TARGET="_top" TITLE="Image Theft">Image Theft</A><FONT SIZE="1" COLOR="#330066" FACE="Symbol" >   ·   </FONT><A HREF="id33.htm" TARGET="_top" TITLE="Lake Applet">Lake Applet</A><FONT SIZE="1" COLOR="#330066" FACE="Symbol" >   ·   </FONT><A HREF="id109.htm" TARGET="_top" TITLE="Other applets">Other applets</A><FONT SIZE="1" COLOR="#330066" FACE="Symbol" >   ·   </FONT><B>Slideshow1</B><FONT SIZE="1" COLOR="#330066" FACE="Symbol" >   ·   </FONT><A HREF="id127.htm" TARGET="_top" TITLE="Slideshow2">Slideshow2</A><FONT SIZE="1" COLOR="#330066" FACE="Symbol" >   ·   </FONT><A HREF="id144.htm" TARGET="_top" TITLE="Slideshow3">Slideshow3</A><FONT SIZE="1" COLOR="#330066" FACE="Symbol" >   ·   </FONT><A HREF="id88.htm" TARGET="_top" TITLE="Galleries">Galleries</A><FONT SIZE="1" COLOR="#330066" FACE="Symbol" >   ·   </FONT><A HREF="id141.htm" TARGET="_top" TITLE="DD Thumbnail Viewer">DD Thumbnail Viewer</A><FONT SIZE="1" COLOR="#330066" FACE="Symbol" >   ·   </FONT><A HREF="imagemap.htm" TARGET="_top" TITLE="image map">image map</A><FONT SIZE="1" COLOR="#330066" FACE="Symbol" >   ·   </FONT><A HREF="id113.htm" TARGET="_top" TITLE="xara thumbnail">xara thumbnail</A><FONT SIZE="1" COLOR="#330066" FACE="Symbol" >   ·   </FONT><A HREF="id114.htm" TARGET="_top" TITLE="Random Image">Random Image</A><FONT SIZE="1" COLOR="#330066" FACE="Symbol" >   ·   </FONT><A HREF="id131.htm" TARGET="_top" TITLE="LOGO BRANDING">LOGO BRANDING</A><FONT SIZE="1" COLOR="#330066" FACE="Symbol" >   ·   </FONT><A HREF="id126.htm" TARGET="_top" TITLE="Animated Image">Animated Image</A><FONT SIZE="1" COLOR="#330066" FACE="Symbol" >   ·   </FONT><A HREF="id132.htm" TARGET="_top" TITLE="photo with sound">photo with sound</A></div> <bR> <bR> <div> <B>Implement the Slideshow 1                          </B><FONT SIZE="3" COLOR="#000000" FACE="Arial" ><A HREF="id32.htm" TARGET="_top" TITLE="Slideshow">Another Slideshow implementation</A></FONT></div> <div> As requested by visitor on the CSB web board.  (similar to this one)</div> <div> This script comes from Dynamic Drive, modified to run in CSB by Samantha (added extra images also)</div> <div> This script can:</div> <div> <IMG BORDER="0" SRC="Symb075c00b700f000000000.png" HEIGHT="16" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">use same or different size images</div> <div> <IMG BORDER="0" SRC="Symb075c00b700f000000000.png" HEIGHT="16" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">automatically flips (at speed you set)</div> <div> <IMG BORDER="0" SRC="Symb075c00b700f000000000.png" HEIGHT="16" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">allows linking from images, and </div> <div> <IMG BORDER="0" SRC="Symb075c00b700f000000000.png" HEIGHT="16" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">has optional comment below image  </div> <bR> <DIV ALIGN="LEFT"></DIV> <div> <TABLE BORDER="2" CELLPADDING="2" CELLSPACING="1" WIDTH="550" BORDERCOLORLIGHT="#9999CC" BORDERCOLORDARK="#9999CC" FRAME="BOX" RULES="ALL" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP BGCOLOR=#FFFFFF HEIGHT= 35 WIDTH="538"><div> <FONT SIZE="2" COLOR="#6600CC" FACE="Arial" >NOTE:  </FONT>This style slideshow scrolls upwards with the page.  If you want a slideshow as part of the background so the text scrolls beside it or over it, then check out the <A HREF="http://www.samisite.com/backgrounds/" TARGET="_blank" TITLE="http://www.samisite.com/backgrounds/">backgrounds area</A>.<FONT SIZE="3" COLOR="#000000" FACE="Arial" > </FONT></div> </tD> </tR> </TABLE></div> <bR> <bR> <div>  <script language="JavaScript1.2"> /*********************************************** * Flexi Slideshow- © Dynamic Drive (www.dynamicdrive.com) * This notice must stay intact for use * Visit http://www.dynamicdrive.com/ for full source code * * Modified for use in CSB and Trellix by Samantha Conway * MUST change gEMDIR to GEMDIR before using code!!! ***********************************************/ var variableslide=new Array() //variableslide[x]=["path to image", "OPTIONAL link for image", "OPTIONAL text description (supports HTML tags)"] variableslide[0]=['HTMLobj-480/1.jpg', '', 'Angel Oak on Johns Island, SC'] variableslide[1]=['HTMLobj-480/2.jpg', 'http://www.americanforests.org/htr/view_tree.php?tree_id=45', 'Angel Oak is on National Tree Registry.'] variableslide[2]=['HTMLobj-480/3.jpg', '', '1500+ years old!'] variableslide[3]=['HTMLobj-480/4.jpg', '', '17100 sq ft shade'] variableslide[4]=['HTMLobj-480/5.jpg', '', ''] //configure the below 3 variables to set the dimension/background color of the slideshow var slidewidth='360px' //set to width of LARGEST image in your slideshow var slideheight='480' //set to height of LARGEST iamge in your slideshow, plus any text description var slidebgcolor='#D8DCD8' //configure the below variable to determine the delay between image rotations (in miliseconds) var slidedelay=5000 ////Do not edit pass this line//////////////// var ie=document.all var dom=document.getElementById for (i=0;i<variableslide.length;i++){ var cacheimage=new Image() cacheimage.src=variableslide[i][0] } var currentslide=0 function rotateimages(){ contentcontainer='<center>' if (variableslide[currentslide][1]!="") contentcontainer+='<a href="'+variableslide[currentslide][1]+'">' contentcontainer+='<img src="'+variableslide[currentslide][0]+'" border="0" vspace="3">' if (variableslide[currentslide][1]!="") contentcontainer+='</a>' contentcontainer+='</center>' if (variableslide[currentslide][2]!="") contentcontainer+=variableslide[currentslide][2] if (document.layers){ crossrotateobj.document.write(contentcontainer) crossrotateobj.document.close() } else if (ie||dom) crossrotateobj.innerHTML=contentcontainer if (currentslide==variableslide.length-1) currentslide=0 else currentslide++ setTimeout("rotateimages()",slidedelay) } if (ie||dom) document.write('<div id="slidedom" style="width:'+slidewidth+';height:'+slideheight+'; background-color:'+slidebgcolor+'"></div>') function start_slider(){ crossrotateobj=dom? document.getElementById("slidedom") : ie? document.all.slidedom : document.slidensmain.document.slidenssub if (document.layers) document.slidensmain.visibility="show" rotateimages() } if (ie||dom) start_slider() else if (document.layers) window.onload=start_slider </script> <ilayer id="slidensmain" width=&{slidewidth}; height=&{slideheight}; bgColor=&{slidebgcolor}; visibility=hide><layer id="slidenssub" width=&{slidewidth}; left=0 top=0></layer></ilayer>  </div> <bR> <bR> <bR> <div> <B>EASY STEPS: </B></div> <div> <B>1. Choose images.</B></div> <bR> <div> <B>2. Modify code:</B><FONT SIZE="1" COLOR="#663366" FACE="Arial" >   </FONT><FONT SIZE="1" COLOR="#660099" FACE="Arial" ><B>put ^GEMDIR/ in code before each image!  (CSB3 still uses GEMDIR) </B></FONT></div> <bR> <div> <FONT SIZE="3" COLOR="#000000" FACE="Arial" ><B>3. Insert the code: </B></FONT><B>into </B><B>Insert > HTML (</B><B>Webgem </B><B>)</B></div> <bR> <div> <B>4. Insert photo files into </B><FONT SIZE="3" COLOR="#660099" FACE="Arial" ><B>Webcomponents</B></FONT><FONT SIZE="3" COLOR="#663366" FACE="Arial" ><B> (</B></FONT><B>Gem files </B><FONT SIZE="3" COLOR="#663366" FACE="Arial" ><B>)</B></FONT></div> <div> Make sure capitalization is same as you used in the code (step 2)!</div> <bR> <bR> <bR> <DIV ALIGN="LEFT"></DIV> <div> <A HREF="http://www.dynamicdrive.com/dynamicindex14/flexislide.htm" TARGET="_blank" TITLE="http://www.dynamicdrive.com/dynamicindex">Download ORIGINAL Script from Dynamic Drive</A></div> <bR> <div> <B>THE CODE BELOW IS MODIFIED FOR USE IN CSB:</B><FONT SIZE="3" COLOR="#FFFFFF" FACE="Arial" > <style> .highlighttext{ background-color:yellow; font-weight:bold; color: #6600CC; } </style> <script language="Javascript">  </script>  </FONT></div> <div> <TABLE BORDER="2" CELLPADDING="2" CELLSPACING="1" WIDTH="751" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="BOX" RULES="ALL" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP HEIGHT= 1690 WIDTH="739"><div> <B>To capture the code, press Select All then COPY the contents.</B></div> <div> <B>Place code into an insert > HTML (webgem in Trellix)</B></div> <div> <B>MUST change each gEMDIR to GEMDIR before using code!</B></div> <div> <B> <form name="code1"> <a class="highlighttext" href="javascript:HighlightAll('code1.select1')">Select All</a><br> <textarea name="select1" rows=10 cols=65 > <script language="JavaScript1.2"> /*********************************************** * Flexi Slideshow- © Dynamic Drive (www.dynamicdrive.com) * This notice must stay intact for use * Visit http://www.dynamicdrive.com/ for full source code * * Modified for use in CSB and Trellix by Samantha Conway * MUST change gEMDIR to GEMDIR before using code!!! ***********************************************/ var variableslide=new Array() //variableslide[x]=["path to image", "OPTIONAL link for image", "OPTIONAL text description (supports HTML tags)"] variableslide[0]=['HTMLobj-1095/1.jpg', '', 'Angel Oak on Johns Island, SC'] variableslide[1]=['HTMLobj-1095/2.jpg', 'http://www.americanforests.org/htr/view_tree.php?tree_id=45', 'Angel Oak is on National Tree Registry.'] variableslide[2]=['HTMLobj-1095/3.jpg', '', '1500+ years old!'] variableslide[3]=['HTMLobj-1095/4.jpg', '', '17100 sq ft shade'] variableslide[4]=['HTMLobj-1095/5.jpg', '', ''] //configure the below 3 variables to set the dimension/background color of the slideshow var slidewidth='360px' //set to width of LARGEST image in your slideshow var slideheight='400' //set to height of LARGEST iamge in your slideshow, plus any text description var slidebgcolor='#D8DCD8' //configure the below variable to determine the delay between image rotations (in miliseconds) var slidedelay=5000 ////Do not edit pass this line//////////////// var ie=document.all var dom=document.getElementById for (i=0;i<variableslide.length;i++){ var cacheimage=new Image() cacheimage.src=variableslide[i][0] } var currentslide=0 function rotateimages(){ contentcontainer='<center>' if (variableslide[currentslide][1]!="") contentcontainer+='<a href="'+variableslide[currentslide][1]+'">' contentcontainer+='<img src="'+variableslide[currentslide][0]+'" border="0" vspace="3">' if (variableslide[currentslide][1]!="") contentcontainer+='</a>' contentcontainer+='</center>' if (variableslide[currentslide][2]!="") contentcontainer+=variableslide[currentslide][2] if (document.layers){ crossrotateobj.document.write(contentcontainer) crossrotateobj.document.close() } else if (ie||dom) crossrotateobj.innerHTML=contentcontainer if (currentslide==variableslide.length-1) currentslide=0 else currentslide++ setTimeout("rotateimages()",slidedelay) } if (ie||dom) document.write('<div id="slidedom" style="width:'+slidewidth+';height:'+slideheight+'; background-color:'+slidebgcolor+'"></div>') function start_slider(){ crossrotateobj=dom? document.getElementById("slidedom") : ie? document.all.slidedom : document.slidensmain.document.slidenssub if (document.layers) document.slidensmain.visibility="show" rotateimages() } if (ie||dom) start_slider() else if (document.layers) window.onload=start_slider </script> <ilayer id="slidensmain" width=&{slidewidth}; height=&{slideheight}; bgColor=&{slidebgcolor}; visibility=hide><layer id="slidenssub" width=&{slidewidth}; left=0 top=0></layer></ilayer> </textarea> </form>  </B></div> <div> <B>I have made notes in code below and it will effect functionality!</B></div> <div> <B>Use the Select All choice above!</B><FONT SIZE="3" COLOR="#000000" FACE="Arial" > </FONT><FONT SIZE="2" COLOR="#000000" FACE="Arial" > </FONT></div> <bR> <bR> <div> NOTE: Change items in red to match yours</div> <div> <script language="JavaScript1.2"></div> <bR> <div> /***********************************************</div> <div> * Flexi Slideshow- © Dynamic Drive (www.dynamicdrive.com)</div> <div> * This notice must stay intact for use</div> <div> * Visit http://www.dynamicdrive.com/ for full source code</div> <div> ***********************************************/</div> <bR> <div> var variableslide=new Array()</div> <bR> <div> //variableslide[x]=["<FONT SIZE="2" COLOR="#000000" FACE="Arial" ><B>^GEMDIR/</B></FONT>path to image", "OPTIONAL link for image", "OPTIONAL text description (supports HTML tags)"]</div> <div> variableslide[0]=['<B>^GEMDIR/</B><FONT SIZE="2" COLOR="#990033" FACE="Arial" ><B>1.jpg</B></FONT>', '', 'Angel Oak on Johns Island, SC']</div> <div> variableslide[1]=[<B>'^GEMDIR/</B><FONT SIZE="2" COLOR="#990033" FACE="Arial" ><B>2.jpg</B></FONT>', '<FONT SIZE="2" COLOR="#0000FF" FACE="Arial" >http://www.americanforests.org/htr/view_tree.php?tree_id=45</FONT>', 'Angel Oak is on National Tree Registry.']</div> <div> variableslide[2]=['<B>^GEMDIR/</B><FONT SIZE="2" COLOR="#990033" FACE="Arial" ><B>3.jpg</B></FONT>', '', '1500+ years old!']</div> <div> variableslide[3]=['<B>^GEMDIR/</B><FONT SIZE="2" COLOR="#990033" FACE="Arial" ><B>4.jpg</B></FONT>', '', '17100 sq ft shade']</div> <div> variableslide[4]=[<B>'^GEMDIR/</B><FONT SIZE="2" COLOR="#990033" FACE="Arial" ><B>5.jpg</B></FONT>', '', '']</div> <bR> <div> //configure the below 3 variables to set the dimension/background color of the slideshow</div> <bR> <div> var slidewidth='<FONT SIZE="2" COLOR="#990000" FACE="Arial" ><B>360</B></FONT>px' //set to width of LARGEST image in your slideshow</div> <div> var slideheight='<FONT SIZE="2" COLOR="#990000" FACE="Arial" ><B>480</B></FONT>' //set to height of LARGEST iamge in your slideshow, plus any text description</div> <div> var slidebgcolor='<FONT SIZE="2" COLOR="#990000" FACE="Arial" ><B>#D8DCD8</B></FONT>'</div> <bR> <div> //configure the below variable to determine the delay between image rotations (in miliseconds)</div> <div> var slidedelay=<FONT SIZE="2" COLOR="#990000" FACE="Arial" >5000</FONT></div> <bR> <div> ////Do not edit pass this line////////////////</div> <bR> <div> var ie=document.all</div> <div> var dom=document.getElementById</div> <bR> <div> for (i=0;i<variableslide.length;i++){</div> <div> var cacheimage=new Image()</div> <div> cacheimage.src=variableslide[i][0]</div> <div> }</div> <bR> <div> var currentslide=0</div> <bR> <div> function rotateimages(){</div> <div> contentcontainer='<center>'</div> <div> if (variableslide[currentslide][1]!="")</div> <div> contentcontainer+='<a href="'+variableslide[currentslide][1]+'">'</div> <div> contentcontainer+='<img src="'+variableslide[currentslide][0]+'" border="0" vspace="3">'</div> <div> if (variableslide[currentslide][1]!="")</div> <div> contentcontainer+='</a>'</div> <div> contentcontainer+='</center>'</div> <div> if (variableslide[currentslide][2]!="")</div> <div> contentcontainer+=variableslide[currentslide][2]</div> <bR> <div> if (document.layers){</div> <div> crossrotateobj.document.write(contentcontainer)</div> <div> crossrotateobj.document.close()</div> <div> }</div> <div> else if (ie||dom)</div> <div> crossrotateobj.innerHTML=contentcontainer</div> <div> if (currentslide==variableslide.length-1) currentslide=0</div> <div> else currentslide++</div> <div> setTimeout("rotateimages()",slidedelay)</div> <div> }</div> <bR> <div> if (ie||dom)</div> <div> document.write('<div id="slidedom" style="width:'+slidewidth+';height:'+slideheight+'; background-color:'+slidebgcolor+'"></div>')</div> <bR> <div> function start_slider(){</div> <div> crossrotateobj=dom? document.getElementById("slidedom") : ie? document.all.slidedom : document.slidensmain.document.slidenssub</div> <div> if (document.layers)</div> <div> document.slidensmain.visibility="show"</div> <div> rotateimages()</div> <div> }</div> <bR> <div> if (ie||dom)</div> <div> start_slider()</div> <div> else if (document.layers)</div> <div> window.onload=start_slider</div> <bR> <div> </script></div> <bR> <div> <ilayer id="slidensmain" width=&{slidewidth}; height=&{slideheight}; bgColor=&{slidebgcolor}; visibility=hide><layer id="slidenssub" width=&{slidewidth}; left=0 top=0></layer></ilayer></div> </tD> </tR> </TABLE></div> <div>  </div> <bR> <bR> </td> </tr></table></body>