[RESOLVED] Picture Gallery Problem
I've been working on photo gallery that can be seen here:
http://soralinks.atspace.com/gallery/gallery.html
I would like the title to change according to the picture selected.
This works when you click on the thumbnail images.
However, it current does not work with the drop-down menu, "back" and "next" buttons, or the automatic slide-show.
Any help would be greatly appreciated.
The current script can be found here:
HTML Code:
<html>
<head>
<title>Gallery</title>
<script language ="JavaScript">
<!--
var photos = new Array(5);
var p_no = 0;
for ( i= 0; i <= 4; i++){
no = i+1;
photos[i] = "img"+( i+1) +"_L.jpg";
}
function change_photos( op, title ){
var headTitle = document.getElementById("mainTitle");
headTitle.value = title;
switch ( op ){
case -1:
p_no--;
break;
case 5:
p_no ++;
break;
default:
p_no =op;
}
if ( p_no== 5){
p_no =0;
} else if ( p_no == -1){
p_no = 4;
}
document.images[0].src= photos[p_no];
}
function change_select(selectlist){
(selectlist.value)
}
function auto(){
p_no=++p_no%photos.length;
change_photos(p_no, 'title' );
to=setTimeout(function(){ auto(); },3000);
}
function pause(){
clearTimeout(to);
}
function change_select(selectlist){
(selectlist.value)
}
function w_open(){
currentlrgimgTitle=document.getElementById("mainTitle").value;
currentlrgimg=photos[p_no];
jshtml="<html><head><title>"+currentlrgimgTitle+"</title></head><body><h1>"+currentlrgimgTitle+"</h1><img src='"+currentlrgimg+"'></body></html>";
new_win=window.open("","","height=500,width=500 menubar=yes");
new_win.document.write(jshtml);
new_win.focus();
new_win.document.close();
}
//-->
</script>
</head>
<body>
<center>
<form name = "form_1" >
<input type = "text" id="mainTitle" name ="title" value ="LAX"><br>
<img src = "img1_L.jpg">
<br>
<input type= "button" value= "Back" onClick = "change_photos(-1)">
<input type= "button" value= "Next" onClick="change_photos(5)" ><br>
<select name="phot_select" size="1" onChange =" change_photos(this.value, title)">
<option value="0" selected >LAX</option>
<option value="1" >Universal Studios</option>
<option value="2" >Parade</option>
<option value="3">Bridge</option>
<option value="4" >Beach</option>
</select>
<br>
<input type="button" value="View in new window" onClick="w_open()" ><br>
<input type="button" value="Start Slideshow" onmouseup="auto();" > <input type="button" value="Stop Slideshow" onmouseup="pause();" ><br>
</form>
</center>
<hr>
<center><table>
<tr>
<td><img src ="img1_S.jpg" title="LAX" onClick = "change_photos('0',title)"></td>
<td><img src ="img2_S.jpg" title="Universal Studios" onClick = "change_photos('1',title)"></td>
<td><img src ="img3_S.jpg" title="Parade" onClick = "change_photos('2',title)"></td>
<td><img src ="img4_S.jpg" title="Bridge" onClick = "change_photos('3',title)"></td>
<td><img src ="img5_S.jpg" title="Beach" onClick = "change_photos('4',title)"></td></tr>
<tr>
<form name = "form_2">
<td> <input type = "text" name ="titel1" value="LAX" onChange = "change_photos('0')"></td>
<td><input type = "text" name ="titel2" value="Universal Studios" onChange = "change_photos('1')"></td>
<td> <input type = "text" name ="titel3" value="Parade" onChange = "change_photos('2')" ></td>
<td> <input type = "text" name ="titel4" value="Golden Gate Bridge" onChange = "change_photos('3')"></td>
<td> <input type = "text" name ="titel5" value="Beach" onChange = "change_photos('4')"></td>
</form>
</table>
</center>
<br>
<hr>
<br>
</body>
</html>
