...

View Full Version : Caption for images



wakuwuaku
01-27-2009, 02:48 PM
Here is the code im using for a slideshow, i would like to add a title and or a caption to each image, could someone help with this please?


<td width="33%"><h4><u><center>Slideshow</center></u><br/><img src="Images/img1.jpg" name="photoslider">
<div align="center">

<script type= "text/javascript">

var photos=new Array();
var which=0;

photos[0]="Images/img1.jpg"
photos[1]="Images/img2.jpg"
photos[2]="Images/img3.jpg"
photos[3]="Images/img4.jpg"
photos[4]="Images/img5.jpg"
photos[5]="Images/img6.jpg"

function backward(){
if (which>0){
window.status='';
which-- ;
document.photoslider.src=photos[which];
}
}

function forward(){
if (which<photos.length-1){
which++ ;
document.photoslider.src=photos[which];
}
else window.status='End of gallery';
}

</script>

<br>
<input type="button" value="&lt;&lt; Back" name="B2" onClick="backward()">
<input type="button" value="Next &gt;&gt;" name="B1" onClick="forward()">
<br><br>

<a href="#" onClick="which=1;backward();return false"><font face="Arial, Helvetica" color="#0000FF"><small><b>Go to the first image</b></small></a>&nbsp;&nbsp;&nbsp;&nbsp;</p>
<a href="#" onClick="which=photos.length-2; forward(); return false"><font face="Arial, Helvetica" color="#0000FF"><small><b>Go to the last image</b></small></a>
</p>

mic2100
01-27-2009, 03:15 PM
hey you wud do sumthing like



photos[0]="Images/img1.jpg"
photos[1]="Images/img2.jpg"
photos[2]="Images/img3.jpg"
photos[3]="Images/img4.jpg"
photos[4]="Images/img5.jpg"
photos[5]="Images/img6.jpg"

alt[0]="Text in here 0"
alt[1]="Text in here 1"
alt[2]="Text in here 2"
alt[3]="Text in here 3"
alt[4]="Text in here 4"
alt[5]="Text in here 5"

//then change this function
function forward(){
if (which<photos.length-1){
which++ ;
document.photoslider.src=photos[which];
document.photoslider.alt=alt[which];
}
else window.status='End of gallery';
}



hope this helps :)

angst
01-27-2009, 03:18 PM
try something like this;
append caption to the end of the image data, then split it in the loop.



<td width="33%"><h4><u><center>Slideshow</center></u><br/><img src="Images/img1.jpg" name="photoslider">
<div id='Caption'></div>
<div align="center">

<script type= "text/javascript">

var photos=new Array();
var which=0;

photos[0]="Images/img1.jpg|test test test"
photos[1]="Images/img2.jpg|test test test"
photos[2]="Images/img3.jpg|test test test"
photos[3]="Images/img4.jpg|test test test"
photos[4]="Images/img5.jpg|test test test"
photos[5]="Images/img6.jpg|test test test"

function backward(){
if (which>0){
window.status='';
which-- ;
document.photoslider.src=photos[which];
}
}

function forward(){
if (which<photos.length-1){
which++ ;

ImageString = photos[which];
ImageData = ImageString.split("|");

document.photoslider.src=ImageData[0];
document.Caption.innerHTML=ImageData[1];
}
else window.status='End of gallery';
}

</script>

<br>
<input type="button" value="&lt;&lt; Back" name="B2" onClick="backward()">
<input type="button" value="Next &gt;&gt;" name="B1" onClick="forward()">
<br><br>

<a href="#" onClick="which=1;backward();return false"><font face="Arial, Helvetica" color="#0000FF"><small><b>Go to the first image</b></small></a>&nbsp;&nbsp;&nbsp;&nbsp;</p>
<a href="#" onClick="which=photos.length-2; forward(); return false"><font face="Arial, Helvetica" color="#0000FF"><small><b>Go to the last image</b></small></a>
</p>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum