/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] Drop Down Menu/ Slide show

I have been working on a simple gallery/slide show.
It can be viewed here:

[URL=”http://soralinks.atspace.com/gallery/gallery.html”]http://soralinks.atspace.com/gallery/gallery.html[/URL]

Thanks to a previous thread I have gotten some of it to work.

However, I have been tried unsuccessfully to get the drop down menu
and automatic sideshow to work.

I would like to get the drop down button to work where
when you select the for example “beach”…the beach picture appears
at as the big picture at the top.

Right now, no matter what is selected it goes back to the first picture.

Also… if possible, if someone could share a simple slide show script that upon
pushing play the pictures automatically change.

Any help would be greatly appreciated.

The page’s current script can be seen here:

[code=html]<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_title(){
document.form_2.value=”form_1″;
}

function change_select(selectlist){
(selectlist.value)
}

//–>
</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)”>&nbsp;
<input type= “button” value= “Next” onClick=”change_photos(5)” ><br>
<select name=”phot_select” size=”1″ onChange =” change_photos(‘0’,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=”newWindow(‘p_no’,’title’,500,250);” ><br>
<input type=”button” value=”Start Slideshow” >&nbsp;<input type=”button” value=”Stop Slideshow” ><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>
[/code]

to post a comment
JavaScript

2 Comments(s)

Copy linkTweet thisAlerts:
@vwphillipsJan 22.2011 — [CODE]<html>
<head>
<title>Gallery</title>
<script [COLOR="Red"]type="text/javascript"[/COLOR]>
<!--

var photos = new Array(5);
var p_no = 0;
var to=null;
for ( i= 0; i <= 4; i++){
no = i+1;
photos[i] = "http://soralinks.atspace.com/gallery/img"+( i+1) +"_L.jpg";
}


function change_photos( op, title ){
pause();
var headTitle = document.getElementById("mainTitle");
headTitle.value = title;
op*=1;
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 auto(){
p_no=++p_no%photos.length;
change_photos(p_no, 'title' );
to=setTimeout(function(){ auto(); },1000);
}

function pause(){
clearTimeout(to);
}

function change_title(){
document.form_2.value="form_1";
}

function change_select(selectlist){
(selectlist.value)
}




//-->
</script>


</head>

<body>
<center>
<form name = "form_1" >
<input type = "text" id="mainTitle" name ="title" value ="LAX"><br>
<img src = "http://soralinks.atspace.com/gallery/img1_L.jpg">

<br>

<input type= "button" value= "Back" onClick = "change_photos(-1)">&nbsp;
<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="newWindow('p_no','title',500,250);" ><br>
<input type="button" value="Start Slideshow" onmouseup="auto();" >&nbsp;<input type="button" value="Stop Slideshow" onmouseup="pause();" ><br>
</form>
</center>
<hr>


<center><table>
<tr>
<td><img src ="http://soralinks.atspace.com/gallery/img1_S.jpg" title="LAX" onClick = "change_photos('0',title)"></td>
<td><img src ="http://soralinks.atspace.com/gallery/img2_S.jpg" title="Universal Studios" onClick = "change_photos('1',title)"></td>
<td><img src ="http://soralinks.atspace.com/gallery/img3_S.jpg" title="Parade" onClick = "change_photos('2',title)"></td>

<td><img src ="http://soralinks.atspace.com/gallery/img4_S.jpg" title="Bridge" onClick = "change_photos('3',title)"></td>
<td><img src ="http://soralinks.atspace.com/gallery/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>
[/CODE]
Copy linkTweet thisAlerts:
@thabit01authorJan 22.2011 — Thank YOU!?

You're Awesome!
×

Success!

Help @thabit01 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.28,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...