[SOLVED] Problems with slideshow in IE6

[Guardian-Mage]

My slideshow code doesn't work on IE6

http://www.HillBillie4x4.com/buggie.php (Images are huge, please be patient)

 

Javascript

<script type="text/javascript">
<!--
<?php
if (isset($_POST['slide']))
{
$slide = $_POST['slide'];
echo "var curImg = $slide;";
}
else
{
echo "var curImg = 1;";
}
?>

var slideLength = 27;

var lock = false;
var run;

var idvar = 'p';

function changeImage(dir)
{
if (document.images)
     {
          curImg = curImg + dir;
	  
          if (curImg > slideLength)
          {
               curImg = 1;
          }
	  
          if (curImg < 1)
          {
               curImg = slideLength;
          }
	  
	  var id = "p" + curImg;	  
	  if (!document.getElementById(id))
	  {  
		curImg = curImg + dir;
	  }
	  var id = "p" + curImg;	  
	  var nextImage = document.getElementById(id).innerHTML;	
          document.getElementById('slideshow').innerHTML = nextImage;
          document.getElementById('slide').value = curImg;
     }
 else
 {
 	window.location = 'index.php';
 }
}
-->
</script>

[emehrkay]

it looks like you're loading all of the images at once. If that is the case, it would be easier if you used some style attirbutes to show/hide the images

 

lets say you put them all in a div

<div id="img_container">

<img src="..." id="..." />

...

</div>

 

now from here i would do something a lil more advnaced, use an object to control the pics and their flow

 

put this script at the bottom of your page before the ending body tag:

 

var slideShow = {

   	imgs: '',
    cur_img: 0,
    
    start: function(){
        slideshow.imgs = document.getElementById('img_container').getElementsByTagName('img');
    },
    
    next: function(){
    	if((slideShow.cur_img + 1) >= slideShow.imgs.length){
        	slideShow.cur_img = 0;
        }else{
            slideShow.cur_img++;  
        }     
        slideShow.dispImg();
    },
    
    prev: function(){
    	if((slideShow.cur_img - 1) < 0){
        	slideShow.cur_img = slideShow.imgs.length - 1;
        }else{
            slideShow.cur_img--;  
        } 
        slideShow.dispImg();
    },
    
    dispImg: function(){
    	var count = slideShow.imgs.length;
        for(var i = 0; i < count; i++){
        	//set all of the images display to none except the current image
        	var visb = (i == slideShow.cur_img) ? 'block' : 'none';
            slideShow.imgs[i].style.display = visb;
        }
    },
    
    goToImg: function(go){
    	//i'll save this one for you
    }
};

slideShow.start();

 

and to use this is pretty simple

 

for your next and back buttons you just add the onclick="slideShow.next();" attribute to the buttons

 

you should set all of your images to display = none when the page loads except the first one, or whatever one you want to show

 

 

[tarun]

I Detected A Javascript Error:

 

Line: 106

Char: 11

Error: Unknown runtime error

Code: 0

URL: http://www.hillbillie4x4.com/buggie.php

 

 

And This Same Error Exists 9 Times