combine php with javscript image rotator

lokust

Hi.

I wonder if its possible to combine php with javascript to rotate images in a given directory without having to manually write the images into a javascript array.

The scripts that I have in mind are:

Fade-in slideshow
http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

and

A Rotator Apart
http://photomatt.net/scripts/randomimage

A Rotator Apart grab the images from a given directory and rotates them on browser refresh (no need to manually add the images to an array). The Fade-in slideshow rotates and fades images manually loaded into an array.

Before I start trying to hack the two together is this even possible?

Google suggests that this hasn't be done before.

Cheers for any input.

unreal128

So if I get this right, you want it to automatically see what images are in the directory and then implement them in the slide-show Javascript function?

lokust

Yep, I'd just like to drop images into a directory and have the script display them without having to type the image names into an array.

unreal128

I don't have much experience with it, but I think that 'scandir' will do the trick for you (see this for more info.) This looks to be the section of the Javascript we want to focus on.

fadeimages[0]=["photo1.jpg", "", ""] //plain image syntax
fadeimages[1]=["photo2.jpg", "http://www.google.com", ""] //image with link syntax
fadeimages[2]=["photo3.jpg", "http://www.javascriptkit.com", "_new"] //image

You should make a for loop that runs through each array element result of 'scandir' and print it as...

print 'fadeimages['.$inc.']=["'.$file.'", "", ""]';

With $inc being your counter in the for loop and $file being = $scandirlist[$inc]. Hope this helps.

lokust

I think SCANDIR is php5 and my host doesn't support that yet 🙁

unreal128

I checked www.php.net and there is another command you can use that is from 4.0RC2 or greater.

<?php
if ($handle = opendir('.')) {
   while (false !== ($file = readdir($handle))) {
       if ($file != "." && $file != "..") {
           echo "$file\n";
       }
   }
   closedir($handle);
}
?>

lokust

thanks Unreal, kind of you to take the time.

So what I need to do is make a for loop that runs through each array element product of the variable $handle.

I've just been on php.net but can't quote figure out how to apply a for loop to this code.

unreal128

Stick this segment of code in between the Javascript part where it calls the fadeimages function like so...

if ($handle = opendir('/locationofimagefiles')) {
   while (false !== ($file = readdir($handle))) {
       if ($file != "." && $file != "..") {
           print 'fadeimages['.$inc.']=["'.$file.'", "", ""]';
       }
   }
   closedir($handle);
}

Let me know how this works out.

lokust

excellent - the php is grabbing the contents of the directory and loading it into an array - but unfortunately not diplaying the images yet 🙁

the php:

<?php
if ($handle = opendir('./img')) {
   while (false !== ($file = readdir($handle))) {
       if ($file != "." && $file != "..") {
           print 'fadeimages['.$inc.']=["'.$file.'", "", ""]';
       }
   }
   closedir($handle);
} 
?>

Outputs:

fadeimages[]=["strawberry.jpg", "", ""]
fadeimages[]=["red pepper.jpg", "", ""]
fadeimages[]=["rasberry.jpg", "", ""]

The images do not display, I guess because of the missing counter [0] [1] [2] ?

unreal128

Im sorry, I totally forgot to add the counter/increment for the array.

if ($handle = opendir('/locationofimagefiles')) {
   $count = 0;
   while (false !== ($file = readdir($handle))) {
       if ($file != "." && $file != "..") {
           print 'fadeimages['.$count.']=["'.$file.'", "", ""]';
           $count++;
       }
   }
   closedir($handle);
}

Weedpacket

You'll need to put something in to set $inc. The line

$inc=0

immediately before the while() loop, and

$inc++

to bump its value; that could either be the last statement of the while() loop, or you could just replace the $inc that's there now with ($inc++).

lokust

Thanks.

The code:

<?php
if ($handle = opendir('./img')) {
   $count = 0;
   while (false !== ($file = readdir($handle))) {
       if ($file != "." && $file != "..") {
           print 'fadeimages['.$count.']=["'.$file.'", "", ""]';
           $count++;
       }
   }
   closedir($handle);
}  

?>

Outputs:

 fadeimages[0]=["strawberry.jpg", "", ""]fadeimages[1]=["red pepper.jpg", "", ""]fadeimages[2]=["rasberry.jpg", "", ""]fadeimages[3]=["potatoes.jpg", "", ""]fadeimages[4]=["orange sky.jpg", "", ""]fadeimages[5]=["old onions.jpg", "", ""]fadeimages[6]=["lemon.jpg", "", ""]fadeimages[7]=["kiwi fruit.jpg", "", ""]

There are two elements preventing the images from showing.

The formatting of the array, each item needs to be on it own line - I have tried inserting a line feed but it just gets printed into the array!
The dhtml script doesn't know that the images are in the folder img/

I tried to add the folder img/ to the line:

print 'fadeimages['.$count.']=["'img/.$file.'", "", ""]';

Though I get parse errors.

I would prefer to just drop the script into the same folder as the images, though the script also gets fed into the array! Is there a way to filter anything but .jpg, .gif and .png? I guess through regex.

lokust

Here is some regex code to hide a file:

$hiddenFilesWildcards = Array("*javascript_fade.php");

$hiddenFilesRegex = Array();

// add files used by snif to hidden file list
if ($useDescriptionsFrom!="") {
    $hiddenFilesWildcards[] = $useDescriptionsFrom;
}
if ($externalStylesheet!="") {
    $hiddenFilesWildcards[] = $externalStylesheet;
}
$hiddenFilesWildcards[] = ".";
$hiddenFilesWildcards[] = basename($_SERVER["PHP_SELF"]);

// build hidden files regular expression
for ($i=0;$i<count($hiddenFilesWildcards);$i++) {
    $translate = Array(
        "." => "\\.",
        "*" => ".*",
        "?" => ".?",
        "+" => "\\+",
        "[" => "\\[",
        "]" => "\\]",
        "(" => "\\(",
        ")" => "\\)",
        "{" => "\\{",
        "}" => "\\}",
        "^" => "\\^",
        "\$" => "\\\$",
        "\\" => "\\\\",
    );
    $hiddenFilesRegex[] = "^".strtr($hiddenFilesWildcards[$i],$translate)."$";
}
// hide .*
$hiddenFilesRegex[] = "^\\.[^.].*$";
$hiddenFilesWholeRegex = "/".join("|",$hiddenFilesRegex)."/i";

Of course with my limited PHP knowledge I just threw it in - luckily it didn't throw any errors, unfortuantely it didn't do anything :bemused:

madwormer2

<?php
if ($handle = opendir('./img')) {
   $count = 0;
   while (false !== ($file = readdir($handle))) {
       if ($file != "." && $file != "..") {
           print 'fadeimages['.$count.']=["./img/'.$file.'", "", ""];
';
           $count++;
       }
   }
   closedir($handle);
}  

?>

Should format it properly, if you havent worked that out yet.

Skip the regex crap, theres no need to use it, and it just makes things complicated.

rikmoncur

here's one I did earlier:
http://www.phpbuilder.com/board/showthread.php?t=10299626&highlight=slideshow

lokust

Sweet that works!

Here's the complete working code (inserted between <body> tags):


<script language="JavaScript1.2" type="text/javascript">

// original fade-in image slideshow script - (www.dynamicdrive.com)

var slideshow_width='140px' //SET IMAGE WIDTH
var slideshow_height='225px' //SET IMAGE HEIGHT
var pause=3000 //SET PAUSE BETWEEN SLIDE (3000=3 seconds)

var fadeimages=new Array()
//set 1) auto-set image paths, 2) optional link, 3), optional link target:

<?php
if ($handle = opendir('./img')) {
   $count = 0;
   while (false !== ($file = readdir($handle))) {
       if ($file != "." && $file != "..") {
           print 'fadeimages['.$count.']=["./img/'.$file.'", "", ""];
';
           $count++;
       }
   }
   closedir($handle);
}  

?> 

////NO need to edit beyond here/////////////

var preloadedimages=new Array()
for (p=0;p<fadeimages.length;p++){
preloadedimages[p]=new Image()
preloadedimages[p].src=fadeimages[p][0]
}

var ie4=document.all
var dom=document.getElementById

if (ie4||dom)
document.write('<div style="position:relative;width:'+slideshow_width+';height:'+slideshow_height+';overflow:hidden"><div  id="canvas0" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10;visibility: hidden"></div></div>')
else
document.write('<img name="defaultslide" src="'+fadeimages[0][0]+'">')

var curpos=10
var degree=10
var curcanvas="canvas0"
var curimageindex=0
var nextimageindex=1

function fadepic(){
if (curpos<100){
curpos+=10
if (tempobj.filters)
tempobj.filters.alpha.opacity=curpos
else if (tempobj.style.MozOpacity)
tempobj.style.MozOpacity=curpos/101
}
else{
clearInterval(dropslide)
nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"
tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
tempobj.innerHTML=insertimage(nextimageindex)
nextimageindex=(nextimageindex<fadeimages.length-1)? nextimageindex+1 : 0
var tempobj2=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
tempobj2.style.visibility="hidden"
setTimeout("rotateimage()",pause)
}
}

function insertimage(i){
var tempcontainer=fadeimages[i][1]!=""? '<a href="'+fadeimages[i][1]+'" target="'+fadeimages[i][2]+'">' : ""
tempcontainer+='<img src="'+fadeimages[i][0]+'" border="0">'
tempcontainer=fadeimages[i][1]!=""? tempcontainer+'</a>' : tempcontainer
return tempcontainer
}

function rotateimage(){
if (ie4||dom){
resetit(curcanvas)
var crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.style.zIndex++
tempobj.style.visibility="visible"
var temp='setInterval("fadepic()",50)'
dropslide=eval(temp)
curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"
}
else
document.images.defaultslide.src=fadeimages[curimageindex][0]
curimageindex=(curimageindex<fadeimages.length-1)? curimageindex+1 : 0
}

function resetit(what){
curpos=10
var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)
if (crossobj.filters)
crossobj.filters.alpha.opacity=curpos
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=curpos/101
}

function startit(){
var crossobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.innerHTML=insertimage(curimageindex)
rotateimage()
}

if (ie4||dom)
window.onload=startit
else
setInterval("rotateimage()",pause)

</script>

Greatly appreciate all of your help. Thanks!

lokust

Hi again.
Back to improve this script.

I've noted that the files are loaded into the array in no particular order.

So to allow for ordering of files by alphanumeric convention, I understand that there is a php function called:

natcasesort

I've inserted this into the code as follows:

<?php
if ($handle = opendir('./img')) {
   $count = 0;
   while (false !== ($file = readdir($handle))) {
       if ($file != "." && $file != "..") {
           [B]natcasesort($file);[/B]
           print 'fadeimages['.$count.']=["./img/'.$file.'", "", ""];
';
           $count++;
       }
   }
   closedir($handle);
}  

?> 

Though I get this error:

[quote]
<b>Warning</b>:  natcasesort(): The argument should be an array[/quote]


Can anyone help?

Cheers.

Weedpacket

It's saying $file isn't an array - and of course it's not; it's just a string - one file name. What would it mean to sort a string containing one filename? You want to start with "image.jpg" and end up with ".aeggijmp"?

So you need to read the files into an array, and then sort the array. Obviously, you can't print the Javascript lines until you've sorted the array, because until you've sorted the array you don't know in what order to print the lines.

$files = array();
while(false!==....)
{
    $files[] = $file;
}
natcasesort($files);
foreach($files as $file)
{
   print 'fadeimages....';
}

lokust

thanks for your help weedpacket. I've tried to incorporate your code into the existing code like:


<?php
if ($handle = opendir('./img')) {
$count = 0;
while (false !== ($file = readdir($handle))) {
if ($file != "." && $file != "..") {
$files = array();
while(false!==....)
{
    $files[] = $file;
}
natcasesort($files);
foreach($files as $file)
{
   print 'fadeimages['.$count.']=["./img/'.$file.'", "", ""];
';
$count++;
}
}
closedir($handle);
}
?>

Not having it 🙁

lokust

Hi, can someone help me understand this code so i can put it together?