current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

Working on creating a full screen slide show in a browser window

Have found these excellent two pieces of code over on javascriptkit

http://www.javascriptkit.com/javatutors/externalphp2.shtml

The php generates the array of image files, the javascript/css/html runs the show.

I have edited the css/html so that images fill the window. This part is not a problem.

I would like the php to generate a random list each time it is run. It seems that shuffle($files); is the answer (?), but wherever I put it in the php file it don't work.

<? 
//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
?>

Can someone please help me shuffle the generated file list array ?

Thank you

html:

<script src="pics/getimages.php"></script>

<script type="text/javascript">

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

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

<div>
<img id="slideshow" src="pics/animal_0001.jpg" />
</div>

Output from original php file:

var galleryarray=new Array();
galleryarray[0]="nature_0001.jpg";
galleryarray[1]="animal_0107.jpg";
galleryarray[2]="nature_0007.jpg";
galleryarray[3]="nature_0083.jpg";
galleryarray[4]="animal_0120.jpg";
galleryarray[5]="nature_0025.jpg";
galleryarray[6]="summertime.jpg";
galleryarray[7]="nature_0091.jpg";
galleryarray[8]="travel_0018.jpg";
galleryarray[9]="animal_0052.jpg";
galleryarray[10]="travel_0038.jpg";
galleryarray[11]="animal_0047.jpg";
galleryarray[12]="nature_0016.jpg";
galleryarray[13]="nature_0024.jpg";
galleryarray[14]="travel_0053.jpg";

Output from your revision:

var galleryarray = true;

Treat:

http://www.tsah.co.uk/tsah/slide/slides.html

share|improve this question

1 Answer 1

up vote 0 down vote accepted

You are over complicating things by building the JS yourself. Try json_encode:

<?php

function returnimages($dirname=".") {
  $images = array(); 
  $pattern="(\.jpg$)|(\.png$)|(\.jpeg$)|(\.gif$)"; //valid image extensions
  if($handle = opendir($dirname)) {
    while(false !== ($file = readdir($handle))){
      if(eregi($pattern, $file)){ //if this file is a valid image
        $images[] = $file;
      }
    }

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

$images = returnimages();
shuffle($images);

Header("content-type: application/x-javascript");
echo 'var galleryarray = ' . json_encode( $images ) . ';'; 
?>

shuffle does not return the shuffled array, but the status of the operation (TRUE/FALSE).

share|improve this answer
    
Hi Sergui, thanks for the reply. I applied your revised code, but it just gives me a black screen after the first picture (which is set in the <img> html). I checked the output of getimages.php and no array is created ? –  Metric Rat Sep 7 '13 at 14:12
    
Yeah, sorry about that, was returning $files instead of $images. Updated. –  Sergiu Paraschiv Sep 7 '13 at 14:23
    
I checked php is at version 5.3 and json is enabled at version 1.21. –  Metric Rat Sep 7 '13 at 14:23
    
Thanks, but still getting blank/black screen, and still no array generated ? :( –  Metric Rat Sep 7 '13 at 14:28
    
Does the relevant javascript have anything to do with it? Now in OP –  Metric Rat Sep 7 '13 at 14:54

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.