Solved

preload images in PHP

Posted on 2011-03-10
17
688 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
  • 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 82

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
 

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 82

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 82

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
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 

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 82

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 82

Accepted Solution

by:
Dave Baldwin earned 500 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 82

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 82

Expert Comment

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

Featured Post

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

Suggested Solutions

This article will explain how to display the first page of your Microsoft Word documents (e.g. .doc, .docx, etc...) as images in a web page programatically. I have scoured the web on a way to do this unsuccessfully. The goal is to produce something …
This article discusses four methods for overlaying images in a container on a web page
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…
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…

707 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now