image gallery + javascript

[cscwebmaster]

resolved

[Philip M]

This should get you started:-

<center>
<td align="center" width="100%"><img src="One.gif" style="width:80px;height:80px" name="photoslider"></td>
</tr>

<tr>
<td width="100%">
<div align="center">

<script type= "text/javascript">

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

photos[0]="One.gif"
photos[1]="Two.gif"
photos[2]="Three.gif"
photos[3]="Four.gif"
photos[4]="Five.gif"
photos[5]="Six.gif"

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()"> &nbsp &nbsp <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 back to the start</b></small></a></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>

</center></div>

If you use the search feature of this forum you will find several other excellent examples.


"Why should I do anything for posterity? What has posterity ever done for me?" - Groucho Marx (1890 - 1977)