Resolved Slideshow doesn't work in IE9 or Firefox

Andre205th · 08-11-2012, 07:53 AM

I'm a beginner and I know there are other ways of doing this. This is what I understand so far, so I'd like this to see it work or understand why it doesn't work in IE9 and latest version of Firefox. It does work in IE7. Thanks for any help.

HTML:

Code:

<img src="0.jpg" id="slide"/>

javascript:

Code:

i = 0;

images = Array();
images[0]="0.JPG";
images[1]="1.JPG";
images[2]="2.JPG";
images[3]="3.JPG";
images[4]="4.JPG";
images[5]="5.JPG";
images[6]="6.JPG";
images[7]="7.JPG";
images[8]="8.JPG";
images[9]="9.JPG";
images[10]="10.JPG";
images[11]="11.JPG";


function forward(){
if(i==11){
i=0;
}else{
i++;
}

if(i==11||i==10||i==9||i==8||i==5||i==4||i==2){
document.getElementById('slide').setAttribute('src',images[i]);
document.getElementById('slide').style.width = "80%";
document.getElementById('slide').style.left = "10%";
}else{
document.getElementById('slide').setAttribute('src',images[i]);
document.getElementById('slide').style.width = "98%";
document.getElementById('slide').style.left = "0%";
} 
}

function backward(){
if(i==0){
i=11;
}else{
i--;
}

if(i==11||i==10||i==9||i==8||i==5||i==4||i==2){
document.getElementById('slide').setAttribute('src',images[i]);
document.getElementById('slide').style.width = "80%";
document.getElementById('slide').style.left = "10%";
}else{
document.getElementById('slide').setAttribute('src',images[i]);
document.getElementById('slide').style.width = "98%";
document.getElementById('slide').style.left = "0%";
} 
}

vwphillips · 08-11-2012, 10:01 AM

see change in red

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<script type="text/javascript">
/*<![CDATA[*/

i = 0;

images = Array();
images[0]="http://www.vicsjavascripts.org.uk/StdImages/One.gif";
images[1]="http://www.vicsjavascripts.org.uk/StdImages/Two.gif";
images[2]="http://www.vicsjavascripts.org.uk/StdImages/Three.gif";
images[3]="http://www.vicsjavascripts.org.uk/StdImages/Four.gif";
images[4]="http://www.vicsjavascripts.org.uk/StdImages/Five.gif";
images[5]="http://www.vicsjavascripts.org.uk/StdImages/Six.gif";
images[6]="http://www.vicsjavascripts.org.uk/StdImages/Seven.gif";
images[7]="http://www.vicsjavascripts.org.uk/StdImages/Eight.gif";
images[8]="http://www.vicsjavascripts.org.uk/StdImages/Nine.gif";
images[9]="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg";
images[10]="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg";
images[11]="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg";


function forward(ud){
 var obj=document.getElementById('slide'),lgth=images.length-1;
 i+=ud;
 if(i>lgth){
  i=0;
 }
 if (i<0){
  i=lgth;
 }
 obj.src=images[i];
 if(i==11||i==10||i==9||i==8||i==5||i==4||i==2){
  obj.style.width = "80%";
  obj.style.left = "10%";
 }
 else{
  obj.style.width = "98%";
  obj.style.left = "0%";
 }
}


/*]]>*/
</script></head>

<body>

<input type="button" name="" value="Forward" onmouseup="forward(1);"/>
<input type="button" name="" value="Back" onmouseup="forward(-1);"/>
<br />
<img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" id="slide"/>
</body>

</html>

Andre205th · 08-11-2012, 10:30 PM

Thanks vwphillips.