[Resolved] How to loop .gifs?

skeetley

Hi all, I can't seem to find the answer in by using the Search button so I guess I must ask this question.

I have 7 unique strings. Each string consists of a url.

Example: $string1 = 'http://www.link.com/image1.gif';

I display each image by using a statement like: echo "<img src=$string1>";

How do I make it so that the echo "<img src=$string1>"; actually loops through all 7 images instead of just displaying the one?

Thanks!!!

Shayne

lazzerous

I'm no javascript expert, and I severly doubt this code will work, but it should give you some ideas on how to go about acheiving what you're looking for...

-=Lazzerous=-

<html>
<head>
<script language="javaScript">
function rotate_image()
	{
	image[0] = "image1.gif";
	image[1] = "image2.gif";
	image[2] = "image3.gif";
	image[3] = "image4.gif";
	image[4] = "image5.gif";
	image[5] = "image6.gif";
	image[6] = "image7.gif";

for (i=0; i<7; i++)
	{
	setTimeout('document.image.rotate = image[i]', 100);
	}
}
</script>
</head>
<body bgcolor="#ffffff" onLoad="rotate_image()">
<img name="rotate" src="whatever.gif">
</body>
</html>

biz

One of two ways really:
a) [EASY] Add a META tag to the HTML to refresh to the next image each time after a certain duration.

b) [HARDER] Write some javascript which will preload the images and rotate them.

groovything

at the top of the page before any html:

session_start();

if($sessIMG ==""){
session_register("sessIMG");
$sessIMG = 1;
}else{

   if($sessIMG < 7){
   $sessIMG = $sessIMG + 1;
   }else{
   $sessIMG = 1
   }
}
$string1 = 'http://www.link.com/image$sessIMG.gif';

or if you just want to display all 7 images on the same page:

for ($x = 1; $x < 8; $x++)
   { 
   $string$x = 'http://www.link.com/image$x.gif';
   echo $string$x;
   }

skeetley

Thanks for the code guys.
I am out of time for today so I will have to wait until tomorrow to see if your code works better than the one I have been working on. It works, but could be better.

<HTML><HEAD>
<SCRIPT>
var img0 = new Image( 600, 225 );
img0.src = "image1.jpg";

var img1 = new Image( 600, 225 );
img1.src = "image2.jpg";

var img2 = new Image( 600, 225 );
img2.src = "image3.jpg";

var img3 = new Image( 600, 225 );
img3.src = "image4.jpg";

var i = 0;
var nbImg = 4; // change to the number of different images you have
function animate() {
  document.images[0].src = eval("img" + i ).src;
  i++;
  if (i == nbImg) i=0; 
  junk = setTimeout("animate();", 500); // in milliseconds
  }
</SCRIPT>
</HEAD><BODY onLoad="animate();">
<IMG src="" width=600 height=225>
</BODY></HTML>

groovything

Cool script! This is all i can think of to refine it a little:

<SCRIPT>
<? 
for ($x = 0; $x < 7; $x++) { 
echo "var img$x = new Image(); img$x.src = '$x.jpg';";
}
?>
var i = 0;
var nbImg = 7; // change to the number of different images you have
function animate() {
  document.images[0].src = eval("img" + i ).src;
  i++;
  if (i == nbImg) i=0; 
  junk = setTimeout("animate();", 1000); // in milliseconds
  }
</SCRIPT>
</HEAD><BODY onLoad="animate();">
<IMG src="0.jpg">
</BODY></HTML>

here it is working:
http://www.groovything.com/test/picrotate.php