Image slider not working well

Sometimes works, sometimes doesn't

Page 1 of 1

1 Replies - 587 Views - Last Post: 02 January 2010 - 04:58 PM

#1 noname_clark  Icon User is offline

  • D.I.C Head

Reputation: 4
  • View blog
  • Posts: 75
  • Joined: 22-October 08

Image slider not working well

Posted 02 January 2010 - 04:07 PM

Hey guys, I have some javascript that displays 7 images, with arrows on either end. when you click the arrow, it moves the 7 images to the right or left and grabs a new one.

My problem is that it doesn't work every time. I have tested it in IE8, Chrome, and Firefox 3. I have noticed that when it doesn't work IE says "there are errors on this page" (bottom left hand corner), witht he details of: 
Message: Object expected
Line: 247
Char: 1
Code: 0
URI: http://www.shazbots.org/


here is the code for the page, it grabs 10 images from a database and preloads them

<script language="javascript" type="text/javascript"> 
	images = new Array();
	images_backup = new Array();
	links = new Array();
	function preloader() 
		{
		 // counter
		 var i = 0;
		 // create object
		 imageObj = new Image();
		 // set image list
		<?php
		$conn=mysql_connect("localhost","user","pass");
		mysql_select_db("db", $conn);
		$sql = "SELECT * FROM `images1`"; 
		$sql=mysql_query($sql,$conn) or die(mysql_error());
		while ($newArray=mysql_fetch_array($sql))
	 	 	{
 			$img[$a]=$newArray['small_src'];
 			$link[$a]="images_big.php?auto=".$newArray['auto'];
 			$cap[$a]=$newArray['cap'];
 			$a++;
 			}
				//picks random numbers
		$random[0]=rand(0,$a);
		$random[1]=rand(0,$a);
		$random[2]=rand(0,$a);
		$random[3]=rand(0,$a);
		$random[4]=rand(0,$a);
		$random[5]=rand(0,$a);
		$random[6]=rand(0,$a);
		$random[7]=rand(0,$a);
		$random[8]=rand(0,$a);
		$random[9]=rand(0,$a);
		
		//check to make sure that all the images are valid, if it isn't, grab a new one
		while ($img[$random[0]] == ""){$random[0]=rand(0,$a);}
		while ($img[$random[1]] == ""){$random[1]=rand(0,$a);}
		while ($img[$random[2]] == ""){$random[2]=rand(0,$a);}
		while ($img[$random[3]] == ""){$random[3]=rand(0,$a);}
		while ($img[$random[4]] == ""){$random[4]=rand(0,$a);}
		while ($img[$random[5]] == ""){$random[5]=rand(0,$a);}
		while ($img[$random[6]] == ""){$random[6]=rand(0,$a);}
		while ($img[$random[7]] == ""){$random[7]=rand(0,$a);}
		while ($img[$random[8]] == ""){$random[8]=rand(0,$a);}
		while ($img[$random[9]] == ""){$random[9]=rand(0,$a);}

?>
		
		/*sets the javascript variables equal to the php variables*/
		 images[0]="<?php echo $img[$random[0]]; ?>";
		 images[1]="<?php echo $img[$random[1]]; ?>";
		 images[2]="<?php echo $img[$random[2]]; ?>";
		 images[3]="<?php echo $img[$random[3]]; ?>";
		 images[4]="<?php echo $img[$random[4]]; ?>";
		 images[5]="<?php echo $img[$random[5]]; ?>";
		 images[6]="<?php echo $img[$random[6]]; ?>";
		 images[7]="<?php echo $img[$random[7]]; ?>";
		 images[8]="<?php echo $img[$random[8]]; ?>";
		 images[9]="<?php echo $img[$random[9]]; ?>";
		 
		 links[0]="<?php echo $link[$random[0]]; ?>";
		 links[1]="<?php echo $link[$random[1]]; ?>";
		 links[2]="<?php echo $link[$random[2]]; ?>";
		 links[3]="<?php echo $link[$random[3]]; ?>";
		 links[4]="<?php echo $link[$random[4]]; ?>";
		 links[5]="<?php echo $link[$random[5]]; ?>";
		 links[6]="<?php echo $link[$random[6]]; ?>";
		 links[7]="<?php echo $link[$random[7]]; ?>";
		 links[8]="<?php echo $link[$random[8]]; ?>";
		 links[9]="<?php echo $link[$random[9]]; ?>";
		 
		 // start preloading
		 for(i=0; i<=9; i++) 
		 {
		 imageObj.src=images[i];
		 }
		 
		document.getElementById("img1").src = images[0];
		document.getElementById("img2").src = images[1];
		document.getElementById("img3").src = images[2];
		document.getElementById("img4").src = images[3];
		document.getElementById("img5").src = images[4];
		document.getElementById("img6").src = images[5];
		document.getElementById("img7").src = images[6];
		
		document.getElementById("link1").href = links[0];
		document.getElementById("link2").href = links[1];
		document.getElementById("link3").href = links[2];
		document.getElementById("link4").href = links[3];
		document.getElementById("link5").href = links[4];
		document.getElementById("link6").href = links[5];
		document.getElementById("link7").href = links[6];

		
		

	} 
	
	
	
	function ScrollRight()
	{
//moves the images to the right
		
		
		document.getElementById("img1").src = images[9];
		document.getElementById("img2").src = images[0];
		document.getElementById("img3").src = images[1];
		document.getElementById("img4").src = images[2];
		document.getElementById("img5").src = images[3];
		document.getElementById("img6").src = images[4];
		document.getElementById("img7").src = images[5];
		
		document.getElementById("link1").href = links[9];
		document.getElementById("link2").href = links[0];
		document.getElementById("link3").href = links[1];
		document.getElementById("link4").href = links[2];
		document.getElementById("link5").href = links[3];
		document.getElementById("link6").href = links[4];
		document.getElementById("link7").href = links[5];
		
		images[10]=images[0];
		images[11]=images[1];
		images[12]=images[2];
		images[13]=images[3];
		images[14]=images[4];
		images[15]=images[5];
		images[16]=images[6];
		images[17]=images[7];
		images[18]=images[8];
		images[19]=images[9];
		
		images[0]=images[19];
		images[1]=images[10];
		images[2]=images[11];
		images[3]=images[12];
		images[4]=images[13];
		images[5]=images[14];
		images[6]=images[15];
		images[7]=images[16];
		images[8]=images[17];
		images[9]=images[18];
		
		links[10]=links[0];
		links[11]=links[1];
		links[12]=links[2];
		links[13]=links[3];
		links[14]=links[4];
		links[15]=links[5];
		links[16]=links[6];
		links[17]=links[7];
		links[18]=links[8];
		links[19]=links[9];
		
		links[0]=links[19];
		links[1]=links[10];
		links[2]=links[11];
		links[3]=links[12];
		links[4]=links[13];
		links[5]=links[14];
		links[6]=links[15];
		links[7]=links[16];
		links[8]=links[17];
		links[9]=links[18];
		
 
   }
 
   function ScrollLeft()
   {
//moves images to the left
		
		images[0]=images[1];
		images[1]=images[2];
		images[2]=images[3];
		images[3]=images[4];
		images[4]=images[5];
		images[5]=images[6];
		images[6]=images[7];
		images[7]=images[8];
		images[8]=images[9];
		images[9]=images[0];
			
		links[0]=links[1];
		links[1]=links[2];
		links[2]=links[3];
		links[3]=links[4];
		links[4]=links[5];
		links[5]=links[6];
		links[6]=links[7];
		links[7]=links[8];
		links[8]=links[9]; /*THIS IS LINE 247*/
		links[9]=links[0];
			
		document.getElementById("img1").src = images[0];
		document.getElementById("img2").src = images[1];
		document.getElementById("img3").src = images[2];
		document.getElementById("img4").src = images[3];
		document.getElementById("img5").src = images[4];
		document.getElementById("img6").src = images[5];
		document.getElementById("img7").src = images[6];
		
		document.getElementById("link1").href = links[0];
		document.getElementById("link2").href = links[1];
		document.getElementById("link3").href = links[2];
		document.getElementById("link4").href = links[3];
		document.getElementById("link5").href = links[4];
		document.getElementById("link6").href = links[5];
		document.getElementById("link7").href = links[6];
		

	}


	</script>


and here is how I call it:

<body onload="preloader()">
<!--all my other code-->

<img src="site_image/previous_images.jpg" width="30" name="previous" height="84" alt="Previous Image" onclick="ScrollLeft()"/>
		<a id="link1" href="<?php echo $link[$random[0]]; ?>"> <img id="img1" src="<?php echo $img[$random[0]]; ?>" alt="" width="95px" height="82" border="0"/></a>
		<a id="link2" href="<?php echo $link[$random[1]]; ?>"> <img id="img2" src="<?php echo $img[$random[1]]; ?>" alt="" width="95px" height="82" border="0"/></a>
		<a id="link3" href="<?php echo $link[$random[2]]; ?>"> <img id="img3" src="<?php echo $img[$random[2]]; ?>" alt="" width="95px" height="82" border="0"/></a>
		<a id="link4" href="<?php echo $link[$random[3]]; ?>"> <img id="img4" src="<?php echo $img[$random[3]]; ?>" alt="" width="95px" height="82" border="0"/></a>
		<a id="link5" href="<?php echo $link[$random[4]]; ?>"> <img id="img5" src="<?php echo $img[$random[4]]; ?>" alt="" width="95px" height="82" border="0"/></a>
		<a id="link6" href="<?php echo $link[$random[5]]; ?>"> <img id="img6" src="<?php echo $img[$random[5]]; ?>" alt="" width="95px" height="82" border="0"/></a>
		<a id="link7" href="<?php echo $link[$random[6]]; ?>"> <img id="img7" src="<?php echo $img[$random[6]]; ?>" alt="" width="95px" height="82" border="0"/></a>
		<img  src="http://www.shazbots.org/site_image/next_images.jpg" name="next" alt="image rollover" onclick="ScrollRight()" height="84" width="30"/>  

</body>


You can see this in use at www.shazbots.org it's displayed at the bottom of the page.

I'm just wondering if anyone sees anything that they think is wrong that could cause it to not work every time.

Thanks for any help.

Is This A Good Question/Topic? 0
  • +

Replies To: Image slider not working well

#2 Martyr2  Icon User is offline

  • Programming Theoretician
  • member icon

Reputation: 3873
  • View blog
  • Posts: 11,408
  • Joined: 18-April 07

Re: Image slider not working well

Posted 02 January 2010 - 04:58 PM

Ok you have made this way more complicated than it needs to be. I am guessing because you haven't heard of four crucial functions called shift(), unshift(), push() and pop(). shift takes an element off the beginning of the array and returns it. unshift puts an element onto the beginning of an array. pop takes an element off the end of the array and push puts an element onto the end of the array.

With these four functions you can use an array where if they choose to scroll left, it pops an element off the end of the array and unshifts it onto the front of the array. If they scroll right, it shifts off the front of the array and you push it onto the end of the array. No need to assign elements to one another and do some trickery with the subscripts.

Just keep in mind that each operation you do on the images array will have to be mirrored on the links array.

Once you have done the appropriate change, you then simply loop through the array and assign each element to the corresponding image src. The following link below will provide all the links you need to understand and use these functions...

Javascript Array Object - W3Schools.com

Hope this helps!



"At DIC we be array popping and pushing code ninjas... push crap onto us and we my pop off at the mouth." :snap:
Was This Post Helpful? 1
  • +
  • -
Page 1 of 1