[thelist] Slide show with html text

Jono Young Jono at brookgroup.com
Thu Oct 16 12:52:17 CDT 2003 

Thanks everyone!!!,

Below are five options that have presented themselves to me, that I am going
to try.  This will get a bit long, but should be useful to anyone else in
the same boat as me.  You should be able to copy and paste these into a html
document and see them in action.  Number 4 is from Javier, which looks short
and sweet; I am going to try that one first. There are buttons in some of
these codes just for demonstration purposes.  The final implementation will
not have buttons.

--------------------------------------------------------------------------
Option #1:  Rotating <div> - Random time based
--------------------------------------------------------------------------
<!-- Begin option #1-->

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Random Rotating Layer Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script language="JavaScript" type="text/JavaScript">
<!--

var defaultTimeOut = 5000; //Default timeout 5 seconds

//Starts the rotation.
function startRotation (howMany, timeOut) {
    defaultTimeOut = timeOut;
    setTimeout('rotateLayers(' + howMany + ')', defaultTimeOut);
}

// This function rotates the visibility of layers randomly.
function rotateLayers (howMany) {
    for (var i=1; i<=howMany; i++) eval("document.all.rotatingLayer" + i +
".style.visibility = 'hidden'");
    eval("document.all.rotatingLayer" + (Math.round(Math.random() * (howMany
- 1)) + 1) + ".style.visibility = 'visible'");
    setTimeout('rotateLayers(' + howMany + ')', defaultTimeOut);
}

//-->
</script>
</head>

<body>

<h1>Random Rotating Layer Example</h1>

<div id="rotatingLayer1" style="position:absolute; left:50px; top:150px;
width:50px; height:50px; z-index:1; background-color: #FFFFCC;
layer-background-color: #FFFFCC; border: 1px none #000000; visibility:
hidden;">Rotating Layer 1</div>
<div id="rotatingLayer2" style="position:absolute; left:150px; top:150px;
width:50px; height:50px; z-index:1; background-color: #CCFFFF;
layer-background-color: #CCFFFF; border: 1px none #000000; visibility:
hidden;">Rotating Layer 2</div>
<div id="rotatingLayer3" style="position:absolute; left:250px; top:150px;
width:50px; height:50px; z-index:1; background-color: #FFCC99;
layer-background-color: #FFCC99; border: 1px none #000000; visibility:
hidden;">Rotating Layer 3</div>

<p><input name="start" type="button" id="start" value="Start"
onClick="startRotation(3, 1000);"/></p>

</body>

</html>
<!--End Option #1-->

---------------------------------------------------------------------------
Option #2:  Rotating <div> - Random time based extended
---------------------------------------------------------------------------
<!-- Begin option #2-->

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Random Rotating Layer Example (Extended)</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script language="JavaScript" type="text/JavaScript">
<!--

var defaultTimeOut = 5000; //Default timeout 5 seconds

//Starts the rotation.
function startRotation (howMany, timeOut) {
    defaultTimeOut = timeOut;
    setTimeout('rotateLayers(' + howMany + ')', defaultTimeOut);
}

// This function rotates the visibility of layers randomly.
function rotateLayers (howMany) {
    var randomSelection = (Math.round(Math.random() * (howMany - 1)) + 1);
    while (eval("document.all.rotatingLayer" + randomSelection +
".style.visibility == 'visible'")) randomSelection =
(Math.round(Math.random() * (howMany - 1)) + 1);
    for (var i=1; i<=howMany; i++) eval("document.all.rotatingLayer" + i +
".style.visibility = 'hidden'");
    eval("document.all.rotatingLayer" + randomSelection + ".style.visibility
= 'visible'");
    setTimeout('rotateLayers(' + howMany + ')', defaultTimeOut);
}

//-->
</script>
</head>

<body>

<h1>Random Rotating Layer Example (Extended)</h1>

<div id="rotatingLayer1" style="position:absolute; left:50px; top:150px;
width:50px; height:50px; z-index:1; background-color: #FFFFCC;
layer-background-color: #FFFFCC; border: 1px none #000000; visibility:
hidden;">Rotating Layer 1</div>
<div id="rotatingLayer2" style="position:absolute; left:150px; top:150px;
width:50px; height:50px; z-index:1; background-color: #CCFFFF;
layer-background-color: #CCFFFF; border: 1px none #000000; visibility:
hidden;">Rotating Layer 2</div>
<div id="rotatingLayer3" style="position:absolute; left:250px; top:150px;
width:50px; height:50px; z-index:1; background-color: #FFCC99;
layer-background-color: #FFCC99; border: 1px none #000000; visibility:
hidden;">Rotating Layer 3</div>

<p><input name="start" type="button" id="start" value="Start"
onClick="startRotation(3, 1000);"/></p>

</body>

</html>
<!--End Option #2-->

---------------------------------------------------------------------------
Option #3:  Rotating <div> - Sequential time based
---------------------------------------------------------------------------
<!-- Begin option #3-->

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sequential Rotating Layer Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script language="JavaScript" type="text/JavaScript">
<!--

var defaultTimeOut = 5000; //Default timeout 5 seconds
var next = 1;

//Starts the rotation.
function startRotation (howMany, timeOut) {
    defaultTimeOut = timeOut;
    setTimeout('rotateLayers(' + howMany + ')', defaultTimeOut);
}

// This function rotates the visibility of layers sequentially.
function rotateLayers (howMany) {
    for (var i=1; i<=howMany; i++) eval("document.all.rotatingLayer" + i +
".style.visibility = 'hidden'");
    eval("document.all.rotatingLayer" + next + ".style.visibility =
'visible'");
    next++;
    if (next>howMany) next=1;
    setTimeout('rotateLayers(' + howMany + ')', defaultTimeOut);
}

//-->
</script>
</head>

<body>

<h1>Sequential Rotating Layer Example</h1>

<div id="rotatingLayer1" style="position:absolute; left:50px; top:150px;
width:50px; height:50px; z-index:1; background-color: #FFFFCC;
layer-background-color: #FFFFCC; border: 1px none #000000; visibility:
hidden;">Rotating Layer 1</div>
<div id="rotatingLayer2" style="position:absolute; left:150px; top:150px;
width:50px; height:50px; z-index:1; background-color: #CCFFFF;
layer-background-color: #CCFFFF; border: 1px none #000000; visibility:
hidden;">Rotating Layer 2</div>
<div id="rotatingLayer3" style="position:absolute; left:250px; top:150px;
width:50px; height:50px; z-index:1; background-color: #FFCC99;
layer-background-color: #FFCC99; border: 1px none #000000; visibility:
hidden;">Rotating Layer 3</div>

<p><input name="start" type="button" id="start" value="Start"
onClick="startRotation(3, 1000);"/></p>

</body>

</html>

<!--End Option #3-->

---------------------------------------------------------------------------
Option #4:  from Javier
---------------------------------------------------------------------------
<!-- Begin option #4-->

<html>
<head>
<script language="JavaScript">
var i = 0;
var timerID = 0;
var SlideImages = new array();
SlideImages[0] = new Image(); SlideImages[0].src = "img/slide1.jpg";
SlideImages[1] = new Image(); SlideImages[1].src = "img/slide2.jpg";
SlideImages[2] = new Image(); SlideImages[2].src = "img/slide3.jpg";
...

var SlideText = new array();
SlideText[0] = "Slide 1 text goes here";
SlideText[1] = "Slide 2 text goes here";
SlideText[2] = "You know what goes here";
...

function nextslide() {
  if(timerID) {
    clearTimeout(timerID);
    i++;
  }
  var slide = document.getElementById("slideimage");
  var text = document.getElementById("slidetext");
  slide.src = SlideImages[i].src;
  text.innerHTML = SlideText[i];
  timerID = setTimeout("nextslide()",9000)
}
</script>
</head>
<body onload="nextslide()">
<table>
<tr><td><img id="slideimage" src="spacer.gif"></td>
<tr><td id="slidetext">&nbsp;</td></tr>
</table>
</body>
</html>

<!--End Option #4-->

-----------------------------------------
Option #5 - from Ben
-----------------------------------------
<!-- Begin option #5-->

<p align="center"><input type="button" id="btnPrev" value="&lt;&lt;
Previous" onclick="Prev();"> <input type="button" id="bntPlay" value="Play -
Stop" onclick="Play()"> <input type="button" id="btnNext" value="  Next
&gt;&gt;  " onclick="Next();"></p>

<p align="center"><img id="_Ath_Slide" onload="OnImgLoad()"> </p>

<p align="center"><b>Description:</b> <SPAN id="_Ath_FileName"> </SPAN> <br>
<b>Number of Pictures: <SPAN id="_Ath_Img_X"></SPAN>&nbsp;of <SPAN
id="_Ath_Img_N"></SPAN></b></p>

<p align="center">

<script language="JavaScript1.2">

/*
Interactive Image slideshow with text description
By Christian Carlessi Salvadó (cocolinks at c.net.gt). Keep this notice intact.
Visit http://www.dynamicdrive.com for script
*/


g_fPlayMode = 0;
g_iimg = -1;
g_imax = 0;
g_ImageTable = new Array();

function ChangeImage(fFwd)
{
if (fFwd)
{
if (++g_iimg==g_imax)
g_iimg=0;
}
else
{
if (g_iimg==0)
g_iimg=g_imax;
g_iimg--;
}
Update();
}

function getobject(obj){
if (document.getElementById)
return document.getElementById(obj)
else if (document.all)
return document.all[obj]
}

function Update(){
getobject("_Ath_Slide").src = g_ImageTable[g_iimg][0];
getobject("_Ath_FileName").innerHTML = g_ImageTable[g_iimg][1];
getobject("_Ath_Img_X").innerHTML = g_iimg + 1;
getobject("_Ath_Img_N").innerHTML = g_imax;
}


function Play()
{
g_fPlayMode = !g_fPlayMode;
if (g_fPlayMode)
{
getobject("btnPrev").disabled = getobject("btnNext").disabled = true;
Next();
}
else 
{
getobject("btnPrev").disabled = getobject("btnNext").disabled = false;

}
}
function OnImgLoad()
{
if (g_fPlayMode)
window.setTimeout("Tick()", g_dwTimeOutSec*1000);
}
function Tick() 
{
if (g_fPlayMode)
Next();
}
function Prev()
{
ChangeImage(false);
}
function Next()
{
ChangeImage(true);
}


////configure below variables/////////////////////////////

//configure the below images and description to your own.
g_ImageTable[g_imax++] = new Array ("cake.gif", "It's a cake!");
g_ImageTable[g_imax++] = new Array ("bike.gif", "Bike Rider.");
g_ImageTable[g_imax++] = new Array ("player.gif", "Soccer Player.");
g_ImageTable[g_imax++] = new Array ("watch.gif", "Watch Out!!");
g_ImageTable[g_imax++] = new Array ("hurry.gif", "Hurry Up!");
//extend the above list as desired
g_dwTimeOutSec=2

////End configuration/////////////////////////////

if (document.getElementById||document.all)
window.onload=Play

</script>
</p>

<p align="center"><font face="Arial" size="-2">Free DHTML scripts provided
by<br>
<a href="http://dynamicdrive.com">Dynamic Drive</a></font></p>

<!--End Option #5-->


-- 
Jono Young
Designer/Illustrator

More information about the thelist mailing list