Index It Image Slideshow - Add text? [Archive]

dmwhipp

04-28-2006, 05:17 AM

Hi, I'm new here. I'm using the Index It Image Slideshow from javascriptkit.com for a photograpy site I'm developing and I love it.
http://www.dwwebdesigns.com/nickbaldwin/landscapes.html

Is there any way I could add text - such as descriptions to go along with the corresponding images?

Thanks,
Deborah

Arbitrator

04-29-2006, 04:42 AM

/** waves magic wand **/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<head>



<meta http-equiv="content-type" content="text/html;charset=utf-8"/>

<title>test008</title>

<style type="text/css">

body {
background: #313131;
color: #fff;
}

div#container {
width: 500px;
height: 500px;
margin: auto;
border: 1px solid #000;
}
div#slideshow {
width: 500px;
height: 500px;
display: table-cell; /* standards browsers only (non-IE) */
text-align: center;
vertical-align: middle; /* standards browsers only (non-IE) */
}

</style>

<script type="text/javascript">

function slide(thisimg) {
dir = "photos\/";

if (thisimg == "1") {
img = dir + "landscape01.jpg";
cap = "Caption 1: Pretty!";
}
else if (thisimg == "2") {
img = dir + "landscape02.jpg";
cap = "Caption 2: Kawa\u012b!";
}
else if (thisimg == "3") {
img = dir + "landscape03.jpg";
cap = "Caption 3: Groovy!";
}
else if (thisimg == "4") {
img = dir + "landscape04.jpg";
cap = "Caption 4: Blas\u00e9\u2026";
}

document.getElementById("projector").src = img;
document.getElementById("caption").firstChild.data = cap;
}

</script>

</head>
<body>

<div id="container">
<div id="slideshow">

<a href="javascript:slide('1');">IMG1</a> |
<a href="javascript:slide('2');">IMG2</a> |
<a href="javascript:slide('3');">IMG3</a> |
<a href="javascript:slide('4');">IMG4</a>
<img id="projector" alt="Slideshow Image" src="photos/landscape01.jpg"/>
<span id="caption">Caption 1: Pretty!</span>

</div>
</div>

</body>
</html>