Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

preload images in PHP

Posted on 2011-03-10
17
Medium Priority
?
713 Views
Last Modified: 2013-12-13
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
Comment
Question by:dcass
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 9
  • 7
17 Comments
 
LVL 15

Expert Comment

by:Insoftservice
ID: 35097541
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
 

Author Comment

by:dcass
ID: 35097624
The problem is in the javascript as the php echo code works if I substitute $results for $imgsrc.
$imgsrc is not getting loaded.
0
 
LVL 84

Expert Comment

by:Dave Baldwin
ID: 35097766
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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 

Author Comment

by:dcass
ID: 35098082
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
 

Author Comment

by:dcass
ID: 35098130
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
 
LVL 84

Expert Comment

by:Dave Baldwin
ID: 35098250
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
 

Author Comment

by:dcass
ID: 35098375
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
 
LVL 84

Expert Comment

by:Dave Baldwin
ID: 35098675
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
 

Author Comment

by:dcass
ID: 35098758
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
 

Author Comment

by:dcass
ID: 35099373
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
 
LVL 84

Expert Comment

by:Dave Baldwin
ID: 35100817
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
 

Author Comment

by:dcass
ID: 35113046
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
 
LVL 84

Accepted Solution

by:
Dave Baldwin earned 2000 total points
ID: 35113364
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
 

Author Comment

by:dcass
ID: 35118329
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
 
LVL 84

Expert Comment

by:Dave Baldwin
ID: 35118390
That's a shortcut for what I showed you.
0
 

Author Closing Comment

by:dcass
ID: 35121755
Thanks for sticking with me
0
 
LVL 84

Expert Comment

by:Dave Baldwin
ID: 35122743
You're welcome and thanks for the points.
0

Featured Post

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.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Author Note: Since this E-E article was originally written, years ago, formal testing has come into common use in the world of PHP.  PHPUnit (http://en.wikipedia.org/wiki/PHPUnit) and similar technologies have enjoyed wide adoption, making it possib…
Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this. Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it i…
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

688 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question