Hi,

I am trying to display 5 pics named "pic1", "pic2"....."pic5" in one div.
I have settled that the div will be visible after 5000 ms, and then i have settled cleartimeout function to make the div again hidden. I need to revise it 5 times so that 5 pictures will display in one div one by one.

Please help me by correcting the following code:

<td>
<?
$no = 1;
while( $no < 5 ) 
{ 
$pic = "pic".$no;
echo $pic;
?>
<script> album(); </script>
<div id="pic">
<img src="images/journeys/gallery/<? echo $R4["$pic"]; ?>" width="200" height="200" /></div>
<script> album_hide(); </script>									
<? 
$no+= 1;
$pic= "";
}
?>
</td>

Java script functions are:

function album()
{

 t = setTimeout("document.getElementById('pic').style.visibility = 'visible' ",5000);
									
}

function album_hide()
{
	clearTimeout(t);
}

Thanks for your concern and time.

Try the following:

<td>
<?
$no = 1;
echo '<div id="pic">';
while( $no < 6 ) 
{ 
$pic = "pic".$no;
$R4[$pic]='';
echo $pic;
?>
<script> album(); </script>
<img src="images/journeys/gallery/<? echo $R4["$pic"]; ?>" width="200" height="200" />
<script> album_hide(); </script>									
<? 
$no+= 1;
$pic= "";
}
?>
</div></td>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script>
function album()
{

 t = setTimeout("document.getElementById('pic').style.visibility = 'visible' ",5000);
									
}

function album_hide()
{
	clearTimeout(t);
}
</script>
</head>

<body>
<table>
<tbody>
<td>
<?php
$no = 1;
while( $no < 6 ) 
{ 
$pic = "pic".$no;
echo $pic;
?>
<script> album(); </script>
<div id="pic">
<img src="images/journeys/gallery/<?=$R4["$pic"];?>" width="200" height="200" /></div>
<script> album_hide(); </script>									
<?php 
$no+= 1;
$pic= "";
}
?>
</td>
</tbody>
</table>
</body>
</html>

output:

pic1
pic2
pic3
pic4
pic5

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script>
function album()
{

 t = setTimeout("document.getElementById('pic').style.visibility = 'visible' ",5000);
									
}

function album_hide()
{
	clearTimeout(t);
}
</script>
</head>

<body>
<table>
<tbody>
<td>
<?php
$no = 1;
while( $no < 6 ) 
{ 
$pic = "pic".$no;
echo $pic;
?>
<script> album(); </script>
<div id="pic">
<img src="images/journeys/gallery/<?=$R4["$pic"];?>" width="200" height="200" /></div>
<script> album_hide(); </script>									
<?php 
$no+= 1;
$pic= "";
}
?>
</td>
</tbody>
</table>
</body>
</html>

output:

pic1
pic2
pic3
pic4
pic5

Thanks for your reply. I got the same output but the problem is it just display fisrt pic after 5000 if I dont use cleartimeout(). And if I use it, it will not show any pic. I need to make visible the div after 5000 ms and then to hide it untill the next picture come in from the DB.

I hope you can now understand the problem.

Thanks for your reply. I got the same output but the problem is it just display fisrt pic after 5000 if I dont use cleartimeout(). And if I use it, it will not show any pic. I need to make visible the div after 5000 ms and then to hide it untill the next picture come in from the DB.

I hope you can now understand the problem.

revise this code....to loop on your code for every 5 seconds.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>

<body>
<SCRIPT LANGUAGE="JavaScript">
function displayAlert() {
   alert("5 seconds have elapsed since the button was clicked.")
}
</SCRIPT>
<BODY>
<FORM>
Click the button on the left for a reminder in 5 seconds; 
click the button on the right to cancel the reminder before 
it is displayed.
<P>
<INPUT TYPE="button" VALUE="5-second reminder"
   NAME="remind_button"
   onClick="timerID=setTimeout('displayAlert()',5000)">
<INPUT TYPE="button" VALUE="Clear the 5-second reminder"
   NAME="remind_disable_button"
   onClick="clearTimeout(timerID)">
</FORM>
</BODY>
</body>
</html>

So you are wanting one image to be displayed every 5 seconds, right?

If that is the case, I would have php echo a javascript array with the image names. Then javascript could change the picture easily. Otherwise, I would use ajax.

So you are wanting one image to be displayed every 5 seconds, right?

If that is the case, why not use the sleep function. And doing the following should make the sleep function only effect the loop. So in your main page that the images need to be displayed on place the following:

<head><script>
function clientSideInclude(id, url) {
  var req = false;
  // For Safari, Firefox, and other non-MS browsers
  if (window.XMLHttpRequest) {
    try {
      req = new XMLHttpRequest();
    } catch (e) {
      req = false;
    }
  } else if (window.ActiveXObject) {
    // For Internet Explorer on Windows
    try {
      req = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      try {
        req = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e) {
        req = false;
      }
    }
  }
 var element = document.getElementById(id);
 if (!element) {
  alert("Bad id " + id + 
   "passed to clientSideInclude." +
   "You need a div or span element " +
   "with this id in your page.");
  return;
 }
  if (req) {
    // Synchronous request, wait till we have it all
    req.open('GET', url, false);
    req.send(null);
    element.innerHTML = req.responseText;
  } else {
    element.innerHTML =
   "Sorry, your browser does not support " +
      "XMLHTTPRequest objects. This page requires " +
      "Internet Explorer 5 or better for Windows, " +
      "or Firefox for any system, or Safari. Other " +
      "compatible browsers may also exist.";
  }
}
function imagetrigger(var1) {
    clientSideInclude('dimages', 'images.php?id='+var1);
    }
function imageloader() {
    imagetrigger(1);
    setTimeout("imagetrigger(2)",5000);
    setTimeout("imagetrigger(3)",10000);
    setTimeout("imagetrigger(4)",15000);
    setTimeout("imagetrigger(5)",20000);
    }
</script></head>
<body onload="imageloader();">
Below the images<br>
<td>
<span id="dimages">
</span>
</td>
<br>Above the images

Then in images.php place the following:

<?
$no = 1;
$_GET['id']+=1;
while( $no < $_GET['id'] ) 
{ 
$pic = "pic".$no;
$R4[$pic]='';
echo $pic;
echo '<img src="images/journeys/gallery/'.$R4[$pic].'" width="200" height="200" />';
$no+= 1;
$pic= "";
}
?>
This article has been dead for over six months. Start a new discussion instead.