[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"> </td></tr>
</table>
</body>
</html>
<!--End Option #4-->
-----------------------------------------
Option #5 - from Ben
-----------------------------------------
<!-- Begin option #5-->
<p align="center"><input type="button" id="btnPrev" value="<<
Previous" onclick="Prev();"> <input type="button" id="bntPlay" value="Play -
Stop" onclick="Play()"> <input type="button" id="btnNext" value=" Next
>> " 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> 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