CodeLifter.com - JavaScript Push-Button SlideShow 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 Push-Button SlideShow With Captions & Cross-Fade
Unlimited Images and Captions

Index

Launch
SlideShow Demo
Note: There are 10 images to preload, so give it a moment to load.

You may download the full kit (~104K) by clicking here
[Recommended!]

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

<!--
PushButton SlideShow with Captions and Cross-Fade
Copyright 2003 by CodeLifter.com
Author: etLux

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>

<title>PushButton SlideShow</title>

A.Controls:link    { color:#666666;
                     text-decoration:none;
                     font-family: Arial;
                     font-size:   14pt;
                     font-weight: bold; }
A.Controls:visited { color:#666666; text-decoration:none; 
                     font-family: Arial;
                     font-size:   14pt;
                     font-weight: bold; }
A.Controls:active  { color:#666666; text-decoration:none;
                     font-family: Arial;
                     font-size:   14pt;
                     font-weight: bold; }
A.Controls:hover   { color:#00FF00; text-decoration:none;
                     font-family: Arial;
                     font-size:   14pt;
                     font-weight: bold; }

</style>

// (C) 2003 by 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 = 2;

var Picture = new Array(); // don't change this
var Caption = new Array(); // don't change this
var showHot = false;       // 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]  = 'Nebula01.jpg';
Picture[2]  = 'Nebula02.jpg';
Picture[3]  = 'Nebula03.jpg';
Picture[4]  = 'Nebula04.jpg';
Picture[5]  = 'Nebula05.jpg';
Picture[6]  = 'Nebula06.jpg';
Picture[7]  = 'Nebula07.jpg';
Picture[8]  = 'Nebula08.jpg';
Picture[9]  = 'Nebula09.jpg';
Picture[10] = 'Nebula10.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 = 0;
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];}

</script>

</head>

<table border=0 cellpadding=10 cellspacing=0>
  <tr>
    
    <td width=350 height=280 colspan="3">
    <img src=Nebula00.gif name=PictureBox width=350 height=280>
    </td>
  </tr>
  <tr>
    
    <td id=CaptionBox class=Caption align=center colspan="3">
    This is the default caption.
    </td>
  </tr>
    
  <tr>
    <td align="center">
    <a class=Controls href="#" onClick="javascript:control('B');">< <</a>
    </td>
    <td align="center">
    <a class=Controls href="#" onClick="javascript:control('H');">| | |</a>
    </td>
    <td align="center">
    <a class=Controls href="#" onClick="javascript:control('F');"><b>> ></b></a>
    </td>
  </tr>  
</table>

</center>
</div>

</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.