preload images in PHP

Hi,
give full path for images same in php and javascript
     echo "<tr><td valign=top align=center><img src='http://www.abc.com/Database/account/Ads/Images/$imgsrc[$i]' height=60 width=130><BR><BR></td></tr>";

The problem is in the javascript as the php echo code works if I substitute $results for $imgsrc.
$imgsrc is not getting loaded.

You're mixing javascript and PHP in a way that doesn't work.  $x does not get the value from PHP without the PHP tags like <?php echo $x; ?>.

<input type='hidden' name='x' value="<?php echo $x; ?>"> 
<input type='hidden' name='results' value="<?php echo $results; ?>"> 
<script>
 function  {
    imgsrc = array();
    var imgDir = "/Database/account/Ads/Images/";
    for (var i = 0; i < <?php echo $x; ?>; i++) {
       imgsrc[i] = new Image();
       imgsrc[i].src = imgDir+<?php echo $results; ?>[i];
   }
</script>

Select all Open in new window

Looks good and I understand, but it still doesn't work (although there is no error).
How can I test to see where it's going wrong?

Can it be that I'm using imgsrc which was created in the javascript on the php echo statement?
How do I transfer that array out so it can be used in the php?

First, look at the "View Source" in your browser to see if the correct info is there in those statements.

On line 15 above, you are mixing javascript and PHP also.  "$imgsrc[$i]" is PHP variables but it looks like you're trying to access the javascript above which simply doesn't work.  PHP runs on the server before the page is sent to the browser.  Javascript runs in the browser after the page is received by the browser.  PHP can be used to place a value in a javascript like I showed but it can not reference a javascript value because they don't exist until the browser runs the javascript.

"Preloading images" in javascript is only useful if they are going to be swapped on the page.  It won't speed up images that will be displayed in the initial page view.  "src='Database/account/Ads/Images/$imgsrc[$i]'" should be the direct link to the images though you can load that in PHP.  In addition, the bottom line says to click on the images but you don't have anything to click on.

They will be swapped out on the page - the images are rotating.
Not adding the links until I can preload, display and rotate.  It's just in the text I display - doesn't do anything yet.
So I get that I have to display $results($i) in the echo statement, but then the javascript preload should run.
What I don't understand is if I preload into imgsrc array, how do I rotate using that array (the preloaded array)?
I'm listing entire code - it's very short and should be fairly simple for a PHP programmer (which I'm not).

<?php

$account="account";
$adImage="Images";
$directory = "C:/inetpub/wwwroot/Planroom/DataBase/account/Ads/Images";
$handler = opendir($directory);

if(file_exists($directory)) {

    $results = array();
    $x=0;

    while ($file = readdir($handler)) {
       if ($file != "." && $file != "..") {
        $results[$x] = $file;
        $x+=1;
      }
    }
    closedir($handler);
   }
?>

<input type='hidden' name='x' value="<?php echo $x; ?>"> 
<script>
 function  {
    imgsrc = array();
    var imgDir = "/Database/account/Ads/Images/";
    for (var i = 0; i < <?php echo $x; ?>; i++) {
       imgsrc[i] = new Image();
       imgsrc[i].src = imgDir+<?php echo $results; ?>[i];
   }
 }
</script>


<?php

// Get random number for starting image  
   $rn = rand(0, $x);
   $top = $rn+6;
   $high = $x-6;
   $rnn = $rn-7;
   if ($rn >= $high) {
     $rn = $rnn;
   }
  
   echo "<table align=center cellpadding=0 cellspacing=0>";
   for ($i=$rn; $i<$top; $i++) {
     echo "<tr><td valign=top align=center ><img id='r1' src='Database/account/Ads/Images/$results[$i]' height=60 width=130><BR><BR></td></tr>";
   }
   echo "<tr><td valign=bottom align=center><font style=font-size:10pt color=black face=Verdana><b>Click on the image<br>for more information.</b></font></td></tr></table>";
 
 $imgs = '["' . implode('", "', $results) . '"]';
 $path = '/Database/account/Ads/Images/';
  
?>
<script>
function {
var rotator1 = {
    //path: '/Database/account/Ads/Images/',  // path to your images
    path: '<?php echo $path ?>',
    id:   'r1',   // id assigned in image tag
    bTrans: true, // transition filter for IE Win
    images: ["blue.jpg", "red.jpg", "yellow.jpg", "orange.jpg", "green.jpg", "lightgreen.jpg"]// which I'd like to replace with imgsrc[x+1], imgsrc[x+2], etc.
    }
}
</script>

Select all Open in new window

You will still have a problem with the 'id'.  'id's are supposed to be unique on a page but you are loading that image tag more than once.  The javascript either won't work or will only find the first instance of the tag.

Do you have a working demo version of the script?  Probably with fixed images?  That's what I would do first so I had something to work with.

Yeah - I realized that and changed it to:

echo "<tr><td valign=top align=center ><img id='r1' src='Database/account/Ads/Images/$results[0]' height=60 width=130><BR><BR></td></tr>";
   echo "<tr><td valign=top align=center ><img id='r2' src='Database/account/Ads/Images/$results[1]' height=60 width=130><BR><BR></td></tr>";
   echo "<tr><td valign=top align=center ><img id='r3' src='Database/account/Ads/Images/$results[2]' height=60 width=130><BR><BR></td></tr>";
   echo "<tr><td valign=top align=center ><img id='r4' src='Database/account/Ads/Images/$results[3]' height=60 width=130><BR><BR></td></tr>";
   echo "<tr><td valign=top align=center ><img id='r5' src='Database/account/Ads/Images/$results[4]' height=60 width=130><BR><BR></td></tr>";
   echo "<tr><td valign=top align=center ><img id='r6' src='Database/account/Ads/Images/$results[5]' height=60 width=130><BR><BR></td></tr>";

<script>
function {
iSv =  <?php echo $x; ?> + 1;
var rotator1 = {
    //path: '/Database/account/Ads/Images/',  // path to your images
    path: '<?php echo $path ?>',
    speed:  4500,
    id:   'r1',   // id assigned in image tag
    bTrans: true, // transition filter for IE Win
    images: ["imgsrc[iSv]", "imgsrc[iSv+1]", "imgsrc[iSv+2]", "imgsrc[iSv+3]"] 
    }

Select all Open in new window

So - What I don't understand is if I preload into imgsrc array, how do I rotate using that array (the preloaded array)?
This code still does not rotate the images - it looks like it should to me.

It doesn't to me, there is part of the script missing.  This page http://www.spyka.net/scripts/javascript/simple-banner-rotator looks like it might have a script you can use.

I think I've got everything figured out if I can access a php array from javascript:

<?php

$account="account";
$adImage="Images";
$directory = "C:/inetpub/wwwroot/Planroom/DataBase/account/Ads/Images";
$handler = opendir($directory);

if(file_exists($directory)) {

    $results = array();
    $x=0;

    while ($file = readdir($handler)) {
       if ($file != "." && $file != "..") {
        $results[$x] = $file;
        $x+=1;
      }
    }
    closedir($handler);
   }
?>
<script language="JavaScript">
   var path = 'Database/account/Ads/Images/';
   function RotateImages(Start)
  {
      //var a = new Array(path+"one.jpg",path+"two.jpg",path+"three.jpg", path+"four.jpg");
      var sResults = array();
      sResults = "<?php echo $results ?>";  // how do I load an array from php?
      for (i=1;i < x;i++)  {
         a[i] = sResults[i]; 
      var c = new Array("url1", "url2", "url3", "url4");
      var b = document.getElementById('r1');
      var d = document.getElementById('imageurl');
      if(Start>=a.length)
          Start=0;
      b.src = a[Start];
      d.href = c[Start];
      window.setTimeout("RotateImages(" + (Start+1) + ")",3000);
  }
  
  RotateImages(0);
  
  </script>

Select all Open in new window

Actually you can -

var sResults = ["<?php echo implode ('","', $results); ?>"];
      var a = Array();
// put this in an array - 
      a[0] = path+sResults[0];

Select all Open in new window

That's a shortcut for what I showed you.

Thanks for sticking with me

You're welcome and thanks for the points.