Back To Programming / Scripting / Coding Forum

images displayed from a directory on to another page

  • nigel
  • Born
  • Born
  • No Avatar
  • Joined: Sep 29, 2012
  • Posts: 4
  • Status: Offline

Post September 29th, 2012, 3:56 pm

Hi, my first post here, possibly of many :)
I have seen many scripts that do something similar to what I am about to ask. But none actually do what I want, so here goes.
I have created (in the process of creating) a web page. This webpage will display small images approximately 125 x 125px across the top of the page. The images will be taken from a directory of images that users have uploaded to my site. The amount of images in this directory will change on a regular basis. I needed a script that would reflect this, after surfing the net for sometime I have decided to try and get some help with it.
I found some code which you will see below, I have no idea where it came from or I would of asked the person that coded it. OK here is the code which is in 2 parts, I was told to create a php file and put this code in to it. Once I had created the php file I called it "getimages.php" and uploaded it to my directory which holds all of my images.

Code: [ Select ]
<!DOCTYPE html PUBLIC "-////DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>get images</title>
</head>

<body>
<?
//PHP SCRIPT: getimages.php
Header("content-type: application/x-javascript");

//This function gets the file names of all images in the current directory
//and ouputs them as a JavaScript array
function returnimages($dirname="") {
$pattern="(\.jpg$)|(\.png$)|(\.jpeg$)|(\.gif$)"; //valid image extensions
$files = array();
$curimage=0;
if($handle = opendir($dirname)) {
while(false !== ($file = readdir($handle))){
if(eregi($pattern, $file)){ //if this file is a valid image
//Output it as a JavaScript array element
echo 'galleryarray['.$curimage.']="'.$file .'";';
$curimage++;
}
}

closedir($handle);
}
return($files);
}

echo 'var galleryarray=new Array();'; //Define array in JavaScript
returnimages() //Output the array elements containing the image file names
?>
</body>
</html>
  1. <!DOCTYPE html PUBLIC "-////DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>get images</title>
  6. </head>
  8. <body>
  9. <?
  10. //PHP SCRIPT: getimages.php
  11. Header("content-type: application/x-javascript");
  13. //This function gets the file names of all images in the current directory
  14. //and ouputs them as a JavaScript array
  15. function returnimages($dirname="") {
  16. $pattern="(\.jpg$)|(\.png$)|(\.jpeg$)|(\.gif$)"; //valid image extensions
  17. $files = array();
  18. $curimage=0;
  19. if($handle = opendir($dirname)) {
  20. while(false !== ($file = readdir($handle))){
  21. if(eregi($pattern, $file)){ //if this file is a valid image
  22. //Output it as a JavaScript array element
  23. echo 'galleryarray['.$curimage.']="'.$file .'";';
  24. $curimage++;
  25. }
  26. }
  28. closedir($handle);
  29. }
  30. return($files);
  31. }
  33. echo 'var galleryarray=new Array();'; //Define array in JavaScript
  34. returnimages() //Output the array elements containing the image file names
  35. ?>
  36. </body>
  37. </html>


The second part of the code I was told to put where I want the images to display. So I created a table with 1 row and 12 columns. I then placed the code in to one of the cells, ( I figured If it worked I could place the code in to each cell and set the code to display randomly )that would of given me something like I wanted, if nothing else it would be a start.
Anyway this is the second part of the code. You can see on line 1 edited the by adding "upload/getimages.php" and I did the same thing on line 8 and 16
Now I get the picture or icon showing there is a broken image on my page so I know I cant be to far out on what I have done.

Code: [ Select ]
<script src="upload/getimages.php"></script>

<script type="text/javascript">

var curimg=0
function rotateimages(){
document.getElementById("slideshow").setAttribute("src", "upload/getimages.php"+galleryarray[curimg])
curimg=(curimg<galleryarray.length-1)? curimg+1 : 0
}

window.onload=function(){
setInterval("rotateimages()", 2500)
}
</script>

<div style="width: 170px; height: 160px"><img id="slideshow" src="upload/getimages.php" /></div></td>
 </tr>
 <tr>
  <td width="205" valign="top">
<?php
  1. <script src="upload/getimages.php"></script>
  3. <script type="text/javascript">
  5. var curimg=0
  6. function rotateimages(){
  7. document.getElementById("slideshow").setAttribute("src", "upload/getimages.php"+galleryarray[curimg])
  8. curimg=(curimg<galleryarray.length-1)? curimg+1 : 0
  9. }
  11. window.onload=function(){
  12. setInterval("rotateimages()", 2500)
  13. }
  14. </script>
  16. <div style="width: 170px; height: 160px"><img id="slideshow" src="upload/getimages.php" /></div></td>
  17.  </tr>
  18.  <tr>
  19.   <td width="205" valign="top">
  20. <?php



Now my directory structure is like this I have sub-domain called droppers in this I have a folder called "upload" this is where my images are located. all other pages are simply in the main root of the directory "droppers"
But none the less it does not work and I am not sure where to turn so if someone can suggest where I have gone wrong that would be great.
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post September 29th, 2012, 3:56 pm

  • jammer2552
  • Graduate
  • Graduate
  • User avatar
  • Joined: Jul 23, 2006
  • Posts: 139
  • Status: Offline

Post October 6th, 2012, 9:11 am

getimages.php needs to output just like a javascript file, however you have included the standard html start and end tags. Hence, getimages.php should read:
PHP Code: [ Select ]
<?php header('Content-Type: application/x-javascript'); ?>
var galleryarray = new Array();
<?php
 
$imgDir = ''; // The directory where the images are located
$pattern = '(\.jpg$)|(\.png$)|(\.jpeg$)|(\.gif$)'; // Valid image extensions
 
if($handle = opendir($imgDir)){
 $x = 0;
 while(false !== ($file = readdir($handle))){
  if(eregi($pattern, $file)){ // If this file is a valid image
   echo "galleryarray[{$x}] = '{$file}';\r\n"; // Output it as a JavaScript array element
   ++$x;
  }
 }
 closedir($handle);
}
 
?>
 
  1. <?php header('Content-Type: application/x-javascript'); ?>
  2. var galleryarray = new Array();
  3. <?php
  4.  
  5. $imgDir = ''; // The directory where the images are located
  6. $pattern = '(\.jpg$)|(\.png$)|(\.jpeg$)|(\.gif$)'; // Valid image extensions
  7.  
  8. if($handle = opendir($imgDir)){
  9.  $x = 0;
  10.  while(false !== ($file = readdir($handle))){
  11.   if(eregi($pattern, $file)){ // If this file is a valid image
  12.    echo "galleryarray[{$x}] = '{$file}';\r\n"; // Output it as a JavaScript array element
  13.    ++$x;
  14.   }
  15.  }
  16.  closedir($handle);
  17. }
  18.  
  19. ?>
  20.  


You need to set $imgDir to the directory you're trying to scan, relative to the position of getimages.php.
  • nigel
  • Born
  • Born
  • No Avatar
  • Joined: Sep 29, 2012
  • Posts: 4
  • Status: Offline

Post October 9th, 2012, 2:51 am

Thanks, :)

Page 1 of 1

Post Information

  • Total Posts in this topic: 3 posts
  • Users browsing this forum: No registered users and 165 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.