Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Slide Show does not play 1

Status
Not open for further replies.
snufse1

snufse1

Programmer
Nov 14, 2008
66
US
I have a script that need to have a slide show. When I open the page the slide show loads and shows the 1st image but does not autoplay. I have tested the slide show script and as a stand alone it works. In context with other elements on the page it does not work. Any ideas?


<html>

<head>



<script type="text/javascript">

theimage = new Array();

theimage[0]=["C:/Images/01.jpg", "", "Ist"];
theimage[1]=["C:/Images/02.jpg", "", "2nd"];
theimage[2]=["C:/Images/04.jpg", "", "3rd"];

playspeed=3000;// The playspeed determines the delay for the "Play" button in ms
dotrans=1; // if value = 1 then there are transitions played in IE
transtype='blendTrans';// 'blendTrans' or 'revealtrans'
transattributes='23';// duration=seconds,transition=#<24

i=0;

window.onload=function(){

//preload images into browser
preloadSlide();

//"jump to" box
for (y=0;y<theimage.length;y++) {
document.slideshow.imgComboBox[y]=new Option(theimage[y][2]);
}

//set transitions
GetTrans();

//set the first slide
SetSlide(0);

//autoplay
PlaySlide();
}


function SetSlide(num) {

i=num%theimage.length;

if(i<0)i=theimage.length-1;


if(document.all&&!window.opera&&dotrans==1)eval('document.images.imgslide.filters.'+transtype+'.Apply()')
document.images.imgslide.src=theimage[0];
if(document.all&&!window.opera&&dotrans==1)eval('document.images.imgslide.filters.'+transtype+'.Play()')


if(document.slideshow.imgComboBox){
document.slideshow.imgComboBox.selectedIndex = i;
}


document.getElementById('slidebox').innerHTML=theimage[2];


document.getElementById('slidecount').innerHTML= "Image "+(i+1)+" of "+theimage.length;

}



function PlaySlide() {
if (!window.playing) {
PlayingSlide(i+1);
if(document.slideshow.play){
document.slideshow.play.value=" Stop ";
}
}
else {
playing=clearTimeout(playing);
if(document.slideshow.play){
document.slideshow.play.value=" Play ";
}
}
// if you have to change the image for the "playing" slide
if(document.images.imgPlay){
setTimeout('document.images.imgPlay.src="'+imgStop+'"',1);
imgStop=document.images.imgPlay.src
}
}



function PlayingSlide(num) {
playing=setTimeout('PlayingSlide(i+1);SetSlide(i+1);', playspeed);
}




function GetTrans() {
//si=document.slideshow.trans.selectedIndex;

if((document.slideshow.trans && document.slideshow.trans.selectedIndex == 0) ||

(!document.slideshow.trans &&

dotrans==0)){
dotrans=0;
}
else if ((document.slideshow.trans && document.slideshow.trans.selectedIndex == 1) || (!document.slideshow.trans &&

transtype

== 'blendTrans')){
dotrans=1;
transtype='blendTrans';
document.imgslide.style.filter = "blendTrans(duration=1,transition=1)";
}else{
dotrans=1;
transtype='revealtrans';
if(document.slideshow.trans)

transattributes=document.slideshow.trans[document.slideshow.trans.selectedIndex].value;
document.imgslide.style.filter = "revealTrans(duration=1,transition=" +transattributes+ ")";
}

}

function preloadSlide() {
for(k=0;k<theimage.length;k++) {
theimage[k][0]=new Image().src=theimage[k][0];
}
}



</script>

</head>
<form name="slideshow">


<body bgcolor="#DFDFDF" onload="dynAnimation()">

<div align="center">
<table border="0" cellpadding="0" cellspacing="0" width="780" style="border: 1px solid #808080; border-collapse:collapse"

bordercolor="#111111">
<tr>
<td bgcolor="#244B68">
<div align="center">
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" width="771" height="98">
<tr>
<td align="center" height="11" width="776">
</td>
</tr>
<tr>
<td align="center" style="border: 2px solid #244B68" height="75" width="772">
<table border="0" cellpadding="0" cellspacing="0" width="771" style="border-collapse: collapse" bordercolor="#111111">

</table>
</td>
</tr>
<tr>
<td align="center" height="11" width="776">
</td>
</tr>
</table>
</div>
</div>
</td>
</tr>
<tr>
<td background="new_images/footer_bg.jpg">
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" width="100%" height="16" style="border-collapse: collapse"

bordercolor="#111111">
<tr>
<td align="center" height="16">
<p class="menu"><a href="new_index.htm">Home</a></td>
<td align="center" height="16">
<p class="menu"><a href=" Us</a></td>
<td align="center" height="16">
<p class="menu">Subsidiaries</td>
<td align="center" height="16">
<p class="menu"><a href=" &amp; Photos</a></td>
<td align="center" height="16">
<p class="menu"><a href=" <td align="center" height="16">
<p class="menu"><a href=" Us</a></td>
<td align="center" height="16">
<p class="menu"><a href=" </tr>
</table>


<table border="1" cellpadding="2" cellspacing="0">
<tr>
<td align="center">

<script type="text/javascript">
document.write('<img name="imgslide" id="imgslide" src="'+theimage[0][0]+'" border="0">')
</script>

</a>
</td>
</tr>
<tr>
<td align="center">
<div id="slidecount">
</div>
</td>
</tr>
<tr>
<td align="center">
<div id="slidebox">
</div>
</td>
</tr>
<tr>
<td align="center">
<select name="imgComboBox" onchange="SetSlide(document.slideshow.imgComboBox.selectedIndex);">
</select>
</td>
</tr>
<tr>
<td align="center">
<input type="button" value="I<<" onclick="SetSlide(0);" title="Jump to starting image"/>
<input type="button" value="<<" onclick="SetSlide(i-1);" title="Previous image"/>
<input type="button" name="play" value=" Play " onclick="PlaySlide();" title="Autoplay"/>
<input type="button" value=">>" onclick="SetSlide(i+1);" title="Jump to next image"/>
<input type="button" value=">>I" onclick="SetSlide(theimage.length-1);" title="Jump to ending image"/>
</td>
</tr>
<table>
</head>
</form>
</html>
 
Sort by date Sort by votes
I see two things wrong immediately:

1. Your body 'onload' attribute calls a function 'dynAnimation()' which doesn't exist.

2. You are overriding your window.onload function with the one in the body 'onload'.

I suggest merging the two onload calls and fixing the missing function.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:
Code Couch Tech Snippets & Info:
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
395
Kennelbloke
Kennelbloke
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
372
xwb
xwb
waubain
  • Locked
  • Question
First image in slide gallery not showing - Uncaught TypeError: slides[(slideIndex - 1)] is undefined 1
Replies
2
Views
236
waubain
waubain
AbidingDude
  • Locked
  • Question
Where Does The &quot;name&quot; Attribute Stand?
Replies
1
Views
130
gmmastros
gmmastros
chrisjchrisj
  • Locked
  • Question
Allow camera access - show camera view -- don’t start recording video
Replies
0
Views
94
chrisjchrisj
chrisjchrisj

Part and Inventory Search

Sponsor

Back
Top