Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 714
  • Last Modified:

preload images in PHP

I have this in my PHP (new to me) and it's not working.
I have built an array ($results) of image names from reading the folder.

Please correct:


<input type='hidden' name='x' value="$x"> 
<input type='hidden' name='results' value="$results"> 
<script>
 function  {
    imgsrc = array();
    var imgDir = "/Database/account/Ads/Images/";
    for (var i = 0; i < $x; i++) {
       imgsrc[i] = new Image();
       imgsrc[i].src = imgDir+$results[i];
   }
</script>
<?php
   echo "<table align=center cellpadding=0 cellspacing=0>";
   for ($i=$rn; $i<$top; $i++) {
     echo "<tr><td valign=top align=center><img src='Database/account/Ads/Images/$imgsrc[$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>";
?>

Open in new window

0
dcass
Asked:
dcass
  • 9
  • 7
1 Solution
 
InsoftserviceCommented:
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>";

0
 
dcassAuthor Commented:
The problem is in the javascript as the php echo code works if I substitute $results for $imgsrc.
$imgsrc is not getting loaded.
0
 
Dave BaldwinFixer of ProblemsCommented:
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>

Open in new window

0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
dcassAuthor Commented:
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?
0
 
dcassAuthor Commented:
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?
0
 
Dave BaldwinFixer of ProblemsCommented:
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.
0
 
dcassAuthor Commented:
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>

Open in new window

0
 
Dave BaldwinFixer of ProblemsCommented:
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.
0
 
dcassAuthor Commented:
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]"] 
    }

Open in new window

0
 
dcassAuthor Commented:
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.
0
 
Dave BaldwinFixer of ProblemsCommented:
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.
0
 
dcassAuthor Commented:
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>

Open in new window

0
 
Dave BaldwinFixer of ProblemsCommented:
You can't "access a php array from javascript".  What you can do is write the php array into the javascript array.
var sResults = new Array("<?php echo $results[0]; ?>", "<?php echo $results[1]; ?>", "<?php echo $results[2]; ?>", "<?php echo $results[3]; ?>");

Open in new window

0
 
dcassAuthor Commented:
Actually you can -

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

Open in new window

0
 
Dave BaldwinFixer of ProblemsCommented:
That's a shortcut for what I showed you.
0
 
dcassAuthor Commented:
Thanks for sticking with me
0
 
Dave BaldwinFixer of ProblemsCommented:
You're welcome and thanks for the points.
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 9
  • 7
Tackle projects and never again get stuck behind a technical roadblock.
Join Now