Slide Show Example

MyCerritos |

ABC Index |

Employees & Webs |

TalonNet |

Library |

Calendar |

Web Email |

About Us |

Home|

|News

| Español | 한국 | 中国版

Slide Show Example

Web Handbook >> Goodies >> Slide Show

Copy and paste the text below into your page using the source view.
Size your images to 250 x 250 pixels and number them sequentially.
Create a sub folder in your web and upload the files to that folder.
Change the source below to reflect your file paths.
Write descriptions for each of the images listed. List the medium, photo, illustration, etc. and a description like you are explaining the picture to someone over the telephone.
Create a separate page for the descriptions and link to the page with a d link and the photo descriptions link.

<SCRIPT type="text/JavaScript" language="javascript">
//<![CDATA[
<!--
// (C) 2000 www.CodeLifter.com
// http://www.codelifter.com
// Free for all users, but leave in this  header
// NS4-6,IE4-6
// Fade effect only in IE; degrades gracefully
// =======================================
// set the following variables
// =======================================
// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 3000
// Duration of crossfade (seconds)
var crossFadeDuration = 1
// Specify the image files
var Pic = new Array() // don't touch this
// to add more images, just continue
// the pattern, adding to the array below
Pic[0] = '/uploads/whm/slide show/1.jpg'
Pic[1] = '/uploads/whm/slide show/3.jpg'
Pic[2] = '/uploads/whm/slide show/7.jpg'
Pic[3] = '/uploads/whm/slide show/9.jpg'
Pic[4] = '/uploads/whm/slide show/11.jpg'
Pic[5] = '/uploads/whm/slide show/13.jpg'
Pic[6] = '/uploads/whm/slide show/18.jpg'
Pic[7] = '/uploads/whm/slide show/21.jpg'
Pic[8] = '/uploads/whm/slide show/24.jpg'
Pic[9] = '/uploads/whm/slide show/27.jpg'

// =======================================
// do not edit anything below this line
// =======================================
var t
var j = 0
var p = Pic.length
var bln = true
var preLoad = new Array()
for (i = 0; i < p; i++){
   preLoad[i] = new Image()
   preLoad[i].src = Pic[i]
}
window.onload = runSlideShow;
//function runSlideShow(){
function runSlideShow(){
if (bln == true){
   if (document.all){
      document.images.SlideShow.style.filter="blendTrans(duration=2)"
      document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)"
      document.images.SlideShow.filters.blendTrans.Apply()      
   }
   document.images.SlideShow.src = preLoad[j].src
   
   if (document.all){
   
      document.images.SlideShow.filters.blendTrans.Play()
   }   
   
   j = j + 1
   if (j > (p-1)) j=0
   t = setTimeout('runSlideShow()', slideShowSpeed)
}
}
function pauseSlideShow(){
 bln = false;
}
function playSlideShow(){
 bln = true;
 slideShowSpeed = 3000;
 crossFadeDuration = 1;
 runSlideShow();
}
// -->
//]]>
</SCRIPT>
<div><a href="/WHM/WHM-Slide-Show-Descriptions"><font color="#ffffff">d</font></a><img class="Slides" style="FILTER: blendTrans(duration=crossFadeDuration)" height="250" alt="Rotating Photos of Women's History Month Events" width="250" longdesc="/WHM/WHM-Slide-Show-Descriptions" name="SlideShow" src="http://cms.cerritos.edu/uploads/whm/slide%20show/1.jpg" /> </div>
<div><a id="PlayLink" title="Play slide show" href="javascript:playSlideShow();">&gt;&gt; Play</a> <a id="PlayLink" title="Pause slide show" href="javascript:pauseSlideShow();">|| Pause</a> <a href="/WHM/WHM-Slide-Show-Descriptions">Photo Credits</a></div>

Cerritos College

Web Handbook