CodeLifter.com - JavaScript Cross-Browser SlideShow Script with Captions and Cross-Fade

CodeLifter.com
Software & Scripts by CodeBrain.com

Home

JavaScripts

PopUp Maker
- popup windows

CodeLifter 5
- source viewer

ScrollBar Styler
- color scrollbars

Flash Fixer
- remove alerts

Roll-Over Maker
- image roll-overs

Link Cloaker 5
- encrypt links

Site Capture 3
- hidden frames

CHMOD 2 Utility
- chmod utility

BlackBird 3.0
- browser shell

Zoom 1.0
- magnifier

MicroTicker.com
- text scroller

CodeBrain.com
- java applets

D3Q.com
- xp icon control

BrainCode.com
- java applets

MailToProtector
- protect email

Advanced SlideShow With Captions & Cross-Fade
Adjustable Timing and Unlimited Images and Captions

Index

This is the default caption.

Click here to select the code in the window below.
Use Ctrl+C to copy it to your clipboard.

<!--

SlideShow with Captions and Cross-Fade
(C)2002 by CodeLifter.com

Shows images and accompanying captions.
Browsers: NS4-7,IE4-6
Fade effect only in IE; degrades gracefully.
NS4 shows default caption only.

INSTRUCTIONS:

Copy this entire script into a completely blank
page.  Follow the commented instructions within.

//-->

<html>

<head>

// (C) 2002 www.CodeLifter.com
// http://www.codelifter.com
// Free for all users, but leave in this header.

// ==============================
// Set the following variables...
// ==============================

// Set the slideshow speed (in milliseconds)
var SlideShowSpeed = 3000;

// Set the duration of crossfade (in seconds)
var CrossFadeDuration = 3;

var Picture = new Array(); // don't change this
var Caption = new Array(); // don't change this

// Specify the image files...
// To add more images, just continue
// the pattern, adding to the array below.
// To use fewer images, remove lines
// starting at the end of the Picture array.
// Caution: The number of Pictures *must*
// equal the number of Captions!

Picture[1]  = 'Image001.jpg';
Picture[2]  = 'Image002.jpg';
Picture[3]  = 'Image003.jpg';
Picture[4]  = 'Image004.jpg';
Picture[5]  = 'Image005.jpg';
Picture[6]  = 'Image006.jpg';
Picture[7]  = 'Image007.jpg';
Picture[8]  = 'Image008.jpg';
Picture[9]  = 'Image009.jpg';
Picture[10] = 'Image010.jpg';

// Specify the Captions...
// To add more captions, just continue
// the pattern, adding to the array below.
// To use fewer captions, remove lines
// starting at the end of the Caption array.
// Caution: The number of Captions *must*
// equal the number of Pictures!

Caption[1]  = "This is the first caption.";
Caption[2]  = "This is the second caption.";
Caption[3]  = "This is the third caption.";
Caption[4]  = "This is the fourth caption.";
Caption[5]  = "This is the fifth caption.";
Caption[6]  = "This is the sixth caption.";
Caption[7]  = "This is the seventh caption.";
Caption[8]  = "This is the eighth caption.";
Caption[9]  = "This is the ninth caption.";
Caption[10] = "This is the tenth caption.";

// =====================================
// Do not edit anything below this line!
// =====================================

var tss;
var iss;
var jss = 1;
var pss = Picture.length-1;

var preLoad = new Array();
for (iss = 1; iss < pss+1; iss++){
preLoad[iss] = new Image();
preLoad[iss].src = Picture[iss];}

function runSlideShow(){
if (document.all){
document.images.PictureBox.style.filter="blendTrans(duration=2)";
document.images.PictureBox.style.filter="blendTrans(duration=CrossFadeDuration)";
document.images.PictureBox.filters.blendTrans.Apply();}
document.images.PictureBox.src = preLoad[jss].src;
if (document.getElementById) document.getElementById("CaptionBox").innerHTML= Caption[jss];
if (document.all) document.images.PictureBox.filters.blendTrans.Play();
jss = jss + 1;
if (jss > (pss)) jss=1;
tss = setTimeout('runSlideShow()', SlideShowSpeed);
}

</script>

</head>

<table border=0 cellpadding=0 cellspacing=0>
  <tr>
    
    <td width=350 height=280>
    <img src=Image001.jpg name=PictureBox width=350 height=280>
    </td>
  </tr>
  <tr>
    
    <td id=CaptionBox class=Caption align=center bgcolor=#fedcba>
    This is the default caption.
    </td>
  </tr>
</table>

</body>

</html>

Get The Code!

CodeLifter is a CodeBrain.com Sister Site
� 1995-2008 OEC Corp & CodeLifter.com
CodeLifter� & CodeBrain�
Legal Notices

CodeBrain InterNET Group
BrainCode.com	CodeFoot.com	CodeBelly.com
D3Q.com	etLux.com	FFFast.com
IEFix.com	PopUpWorks.com	MicroTicker.com
DavidSosnowski.com	OECCorp.com	MailToProtector.com
	CodeBrain.com

Free MP3
Downloads

Contemporary classical music, completely free.