Having a cycled (interval) pictures on pre-loaded page through a directory

I am currently working for a library that would like to have a webpage designed digital signage. Most of it has been designed with widgets and through a program called Xcite Pro. I was unable to find any widgets that will allow me to do a slideshow from a directory that will cycle through. I do know the foundations to JavaScript and php.

I do not know how to take a directory and have JavaScript run through an entire directory into a array with picture values. I would like to use the setInterval() command but I seem to only know how to search through a directory by php. I did find a explanation on this site that tells me how to use php to search through and then pull all pictures to be shown. If i can get that to all go into an array that could be used with JavaScript on the site that would actually work fine. The link for that explanation is LINK.

Currently I am just using a folder called pics in my main file. So my directory is “pics” nothing to special. I have seen some things being talked about html5 using a new file search function but that sounds more like for finding particular files rather then taking the entire components of a folder into an array.

Edited 12/23/2013 Per PHPGlue Request and help.

So far the code that I have played with are:

Test html (Main Page)

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Basic XHTML Document</title>
</head>
<body>

<p>President Obama is from Hawaii</p>

<p><img id="scroller" alt="" src="pics/test.jpg" width="600" height="400"/></p>

  <script type='text/javascript' src='common.js'></script>
  <script type='text/javascript' src='picsimagefun.php'></script>
</body>

</html>

Common js File in main directory with main page

// common.js
//<![CDATA[
var doc = document, bod = doc.body, IE = parseFloat(navigator.appVersion.split('MSIE')[1]);
function gteIE(version, className){
  if(IE >= version){
    bod.className = className;
  }
}
function E(e){
  return doc.getElementById(e);
}
//]]>  

Finally I have 2 pictures in a picture folder along with a imagefun php file.

// imagefun.php
<?php
$imgs = implode(array_merge(glob('*.png'), glob('*.jpg')), "', '");
echo "//<![CDATA[
var imgs = ['$imgs'], ni, iA = [];
for(var i in imgs){
  ni = new Image; ni.src = imgs[i]; iA[i] = ni;
}
var pre = onload, iN = 0, iL = imgs.length-1, imgElementId = E('scroller');
imgElementId.src = imgs[0];
onload = function(){
  if(pre)pre();
  imgElementId.src = iA[0];
  setInterval(function(){
    if(iN >= iL)iN = 0;
    imgElementId.src = iA[++iN];
  }, 2000);
}
//]]>";
?>

PHPGlue– Thank you for all the time that you have put into this. Really not trying to be a pain at all and I really do appreciate all of your patience. I have made sure to swap names based on my file structures. Based on what I see for the basic ideas of the code I would think it should work. As I said though when I load to test it, it will only show the picture I defaulted on the load and then never change. One thing that I have noticed is that if you take the code of the image fun php code and run just that, all it returns is an output of //=IL)iN = 0; imgElement.src = iA[++iN]; }, 2000; } //]]> If I am right then that string of output should be similar to the whole thing rather then just a fragment of a line like it is. I do believe if I am understanding the goal of this code we are having it spit out some code into the src location of the picture location?

Ultimately if possible I would like to have a cloud based file location that I could use to have an individual who works here store pictures in that file and then have the website pull all files in that location to be loaded to the page one at a time at an interval of about 15000ms. I would appreciated any comments or recommendations.

Answer

I ended up resolving this myself. Thank you for all the help.

This was a multi parter either way. I created a php cycler code Note** This code will actually run through all that was needed just in php. Sadly though as I wanted this to show up on a web page that would cycle on a timer I needed to use some javascript coding. This caused me to change parts of what was used. If you want to do the same thing you drop all code after you have created the pics array or you can even keep up to the point of the forwards and backwards array to be passed into javascript.

<?php
// create a variable to hold the directory location
$Dir = "..Directorypics";

// Variable to directory
$dirOpen = opendir($Dir);

// Need to start with a main array
$pics = array();
// Need two arrays for going forward and back
$forwards = array();
$backwards = array();


// Need variables for the program
$c = 0;
$d = 0;
$e = 0;
$i = 0;
$f = 0;


// Need to run through all files in folder and store into an array
while ($curFile = readdir($dirOpen))
{
if(strpos($curFile,'.jpg') !== false)
{
    $pics[$i] = $curFile;
    ++$i;
}
}
closedir($dirOpen);

// declare variables to count previous opening of file
$a = count($pics);  // number of pics in the folder
$b = count($pics) - 1; // need to account for starting at 0


// run through pics array fowards
while($f < $a)
{
$forwards[$f] = $pics[$f];
++$f;
}

// run through the pics array backwards
while($b > -1)
{
$backwards[$c] = $pics[$b];
--$b;
++$c;
}
// variables for the functions us
// use function for forward pics
/*function forward($array, $a)
{
$d = 0;

if($d == $a)
{
    $d = 0;
    return "pics/".$array[$d];
    ++$d;
}
else
{
    return "pics/".$array[$d];
    ++$d;
}

}

function backward($backwards, $b)
{
if ($e == $b)  // going to have a conflict with B becuase right now it should be at       -1 or 0. need to compare to the value of -1 and have it reset to the max when reached.
{

}   

}
*/




/*// Test the output of each array
foreach($pics as $imgs)
echo $imgs . "<br />";

foreach($forwards as $fors)
echo $fors . "<br />";

foreach($backwards as $backs)
echo $backs . "<br />";
*/

// $forwards and $backwards are the arrays to use for pics cycling

?>

To pass onto the java script I had to use the following code on another php page created to work with all html design of the main page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
</head>

<body>
<form name="myForm">
<p>&nbsp;</p>
<p>&nbsp;</p>
<p class="auto-style1"><img alt="" src="" id="pics" height="400" width="300"/></p>

<?php include 'imgCycler.php'; ?>

<script type='text/javascript'>
/* <![CDATA [ */
var forwards = <?php echo json_encode($forwards); ?>;
var backwards= <?php echo json_encode($backwards); ?>;
var max = <?php echo $a ?>;
var count  = 0;

function changePic()
{
document.myForm.pics.src='pics/' +forwards[count];
//document.myForm.pics2.src='pics/'+backwards[count];
++count;
if (count == max)
{
    count = 0;
}
}

var start = setInterval('changePic()',5000);
</script>

</body>

</html>

Again PHPGlue thank you for all the help you offered. Hope this is useful for anyone else that wishes to do something similar. Please let me know if there are any questions on the code.

Leave a Reply

Your email address will not be published. Required fields are marked *