...

View Full Version : Captions in a slideshow...please help



MB02
07-11-2005, 06:33 PM
I successfully created a slideshow format but need to add quite a bit of text as a caption to each image. I'm at a loss for how to do so and attempts to incorporate snippets from other codes online have failed. I'm a Javascript novice and any help would be greatly appreciated. Thanks very much. Here's what I have:

<html>
<body>
<script language="Javascript">

var myPix = new Array(1,2,3)
var thisPic = 0
function previous() {

thisPic --;

if (thisPic < 0) {

thisPic = 2;

}

document.myPicture.src = "/images/buyingselling/20050711-retreats-" + myPix[thisPic] + ".jpg";

}

function next() {

thisPic ++;

if (thisPic > 2) {

thisPic = 0;

}


document.myPicture.src = "/images/buyingselling/20050711-retreats-" + myPix[thisPic] + ".jpg";


}

</script>
<p>


<p>
Intro text goes here</p>

</p>

</p>

</p>
<div style="width:315px;">
<p align="center">
<font face="Arial" size="2">
<a href="javascript:previous()">&lt; Previous</a> |
<a href="javascript:next()">Next &gt;</a> </font>
</p>


<p style="text-align:center;">


<img border="0" src="/images/buyingselling/20050711-retreats-1.jpg" width="315" height="600" name="myPicture">
</p>
<p>Default image caption text</p>
<p style="text-align:center;">
<font face="Arial" size="2">
<a href="javascript:previous()">&lt; Previous</a> |
<a href="javascript:next()">Next &gt;</a> </font>
</p>
</div>








</body>

</html>

rwedge
07-11-2005, 06:52 PM
Here's an example based on your code so far:

<html>
<head>
<title> </title>
<script language="Javascript">
var myPix = new Array(1,2,3)
var thisPic = 0
var myText = new Array('This is the first pic','Now looking at number 2','Last picture');
function previous() {
thisPic --;
if (thisPic < 0) {
thisPic = 2;
}
document.myPicture.src = "/images/buyingselling/20050711-retreats-" + myPix[thisPic] + ".jpg";
document.getElementById('picText').innerHTML=myText[thisPic];
}

function next() {
thisPic ++;
if (thisPic > 2) {
thisPic = 0;
}
document.myPicture.src = "/images/buyingselling/20050711-retreats-" + myPix[thisPic] + ".jpg";
document.getElementById('picText').innerHTML=myText[thisPic];
}
</script>
</head>
</html>
<p>
<p>
<p>
<p>Intro text goes here</p>
</p>
</p>
</p>
<div style="width:315px;">
<p align="center">
<font face="Arial" size="2">
<a href="javascript:previous()">&lt; Previous</a> |
<a href="javascript:next()">Next &gt;</a> </font>
</p>
<p style="text-align:center;">
<img border="0" src="/images/buyingselling/20050711-retreats-1.jpg" width="315" height="600" name="myPicture">
</p>
<p id="picText"> Default image caption text </p>
<p style="text-align:center;">
<font face="Arial" size="2">
<a href="javascript:previous()">&lt; Previous</a> |
<a href="javascript:next()">Next &gt;</a> </font>
</p>
</div>

</body>
</html>

MB02
07-11-2005, 07:24 PM
Thanks very much! This worked wonders. Much appreciated.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum