Fade in slideshow using folder instead?

[formadmin]

I really appreciate your help on this, John...unfortunately, the scripts don't really work...I get a blank box where the images should be

I've looked at the array that is output from my getpics.php script, and it is always the same, not random. The array IS getting built, but it's always in the same order, and no images are getting to the movie rotation script.

Here's my getpics.php file:

<?php
Header("content-type: application/x-javascript");

function returnimages($dirname="./") {
   $pattern="\.(jpg|jpeg|png|gif|bmp)$";
   $files = array();
   $curimage=0;
   if($handle = opendir($dirname)) {
       while(false !== ($file = readdir($handle))){
               if(eregi($pattern, $file)){
		 $filedate=date ("M d, Y H:i:s", filemtime($file));
                 echo 'fadeimages[' . $curimage .']=["' . $file . '", ""];' . "\n";
                 $curimage++;
               }
       }

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

echo "var fadeimages=new Array();" . "\n";
returnimages();
?>

I have double-checked the way everything is setup, and it seems right, so my thoughts are that the array is not being passed correctly to the rotation script. Any thoughts here?

[formadmin]

Hi again, John

Sooo, after playing around, I got the scripts to pull from a folder and correctly fade, but the images are not random. That's the last piece of this little puzzle. Here's what I have so far:

I'm using this getpics.php script:

<?
Header("content-type: application/x-javascript");

function returnimages($dirname="./") {
   $pattern="\.(jpg|jpeg|png|gif|bmp)$";
   $files = array();
   $curimage=0;
   if($handle = opendir($dirname)) {
       while(false !== ($file = readdir($handle))){
               if(eregi($pattern, $file)){
		 $filedate=date ("M d, Y H:i:s", filemtime($file));
                 echo 'fadeimages[' . $curimage .']=["' . $file . '", ""];' . "\n";
                 $curimage++;
               }
       }

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

echo "var fadeimages=new Array();" . "\n";
returnimages();
?>

and this is the rotation script in my HTML:

<script type="text/javascript">
var slideshow_width='515px' //SET IMAGE WIDTH
var slideshow_height='230px' //SET IMAGE HEIGHT
var pause=3500 //SET PAUSE BETWEEN SLIDE (3000=3 seconds)

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

How can I use this PHP function to randomize the array created by getpics.php?:

[array_rand()]

For example, here is a script I use on one of my homepages that creates an array and randomly selects one file to display.

<?
$the_array = Array();
$handle = opendir('home_content/'); // << name of target directory

while (false !== ($file = readdir($handle))) { 
   if ($file != "." && $file != ".." && $file != ".svn") {
       $the_array[] = $file;
   } 
}
closedir($handle); 

//this is the random filename picker:
$randomInsertItem = $the_array[array_rand($the_array)];
?>

How can I incorporate the random array function into the getpics.php script? I mean, that getpics.php script is a combination of php and javascript and it is a little greek to me. any thoughts or suggestions would really help

[jscheuer1]

I don't think that fade script has random images. Try the latest version:

http://www.dynamicdrive.com/dynamici...nslideshow.htm

Or, add to the older code you have:

<script type="text/javascript">
var slideshow_width='515px' //SET IMAGE WIDTH
var slideshow_height='230px' //SET IMAGE HEIGHT
var pause=3500 //SET PAUSE BETWEEN SLIDE (3000=3 seconds)

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

fadeimages.sort(function() {return 0.5 - Math.random();});

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

However, the newer code works in more browsers and has more features. This script is even more advanced in some respects:

http://www.dynamicdrive.com/dynamici...army/index.htm

[formadmin]

Oh cool! I didn't see the random part in the Notes when I looked at it the first time (doh!). Actually I didn't even really go through the newer version of the script because the old version worked so well. -Time to upgrade methinks

So you're doing the randomization after the php script creates the array...I was thinking that I could randomize it in PHP, before it gets handed off, but I think your way makes more sense.

Maybe for future versions you'll have a JS function that selects from a specified folder? Seems like it'd be cleaner to do this all in JS instead of relying on a separate PHP script.

hey, thanks again John. YATFM!

[formadmin]

Hi again, John

I DO have another important bit though; when I put the getpics.php file in the same folder as the images, and place the html page that's showing the images in that very same folder, everything is fine, but when I move the html page out of the /images/movie_images/ directory, and change the $dirname variable to match, then the images stop showing. -The scripts are running, but the getpics.php script is only passing the names of the images in the array, not the path to them.

Sooo, I tried this:

<?
Header("content-type: application/x-javascript");

$dirname = "/images/movie_images";
function returnimages($dirname) {
   $pattern="\.(jpg|jpeg|png|gif|bmp)$";
   $files = array();
   $curimage=0;
   if($handle = opendir($dirname)) {
       while(false !== ($file = readdir($handle))){
               if(eregi($pattern, $file)){
		 $filedate=date ("M d, Y H:i:s", filemtime($file));
                 echo 'fadeimages[' . $curimage .']=["' . $file . '", ""];' . "\n";
                 $curimage++;
               }
       }

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

echo "var fadeimages=new Array();" . "\n";
returnimages();
?>

...but that didn't work and only resulted in an empty array.

What's a solid way to either automagically find the path to the location of the getpics.php file itself, OR assign a path in the code and add it in front of the file name in the array?

hope those questions make sense

[jscheuer1]

I would try:

<?php
Header("content-type: application/x-javascript");

function returnimages($dirname = "/images/movie_images/") {
   $pattern="\.(jpg|jpeg|png|gif|bmp)$";
   $files = array();
   $curimage=0;
   if($handle = opendir($dirname)) {
       while(false !== ($file = readdir($handle))){
               if(eregi($pattern, $file)){
         $filedate=date ("M d, Y H:i:s", filemtime($file));
                 echo 'fadeimages[' . $curimage .']=["' . $dirname . $file . '", ""];' . "\n";
                 $curimage++;
               }
       }

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

echo "var fadeimages=new Array();" . "\n";
returnimages();
?>

Notice that the $dirname declaration is in the function's parenthetical arguments area and has the trailing slash, and that it's value is passed on the line:

echo 'fadeimages[' . $curimage .']=["' . $dirname . $file . '", ""];' . "\n";

that makes up each array entry. The one thing that I'm not all that sure about is the use of the network path:

$dirname = "/images/movie_images/"

which indicates you want the PHP script to start from the root of the domain. I've only ever seen this done with relative paths. But, from what you said:

when I move the html page out of the /images/movie_images/ directory, and change the $dirname variable to match, then the images stop showing. -The scripts are running, but the getpics.php script is only passing the names of the images

This leads me to believe that it will work out.

An alternative to what I suggested (PHP code block in this post) would be to use what got you what you mention in the above quote, and then enter the path to the images in the script here:

fadeshow.prototype.populateslide=function(picobj, picindex){
var slideHTML=""
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML='<a href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'">'
slideHTML+='<img src="/images/movie_images/'+this.postimages[picindex].src+'" border="'+this.imageborder+'px">'
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML+='</a>'
picobj.innerHTML=slideHTML
}

[formadmin]

omg, that's what I thought. So there are really 2 discrete paths in this scenario; the one that the PHP script is using in order to get the file names, and the other is the path handed to the JS rotation script so the browser can find the image files themselves (the 2 paths are the same in this instance, but that's only because the getpics.php file is IN the same dir as the images).

Now I can run the movie on my homepage (index.php), and have that index.php file, the getpics.php file, the rotation.js file and the images all in different dirs and it'll all work correctly. nice!

[jscheuer1]

Well, yes. And I just realized that if you use the javascript solution I mentioned, the path should really go here in the script instead of where I originally placed it (the added var declaration is just to fix a typo in the original code, and should be added anyway):

for (var p=0;p<theimages.length;p++){
this.postimages[p]=new Image()
this.postimages[p].src='/images/movie_images/'+theimages[p][0]
}

That way the preloading will still work.

Getting back to the PHP code for a moment, the key to the construction of the array is the line:

echo 'fadeimages[' . $curimage .']=["' . $file . '", ""];' . "\n"; 

However that is coded governs how each individual array entry will come out. You can concatenate into it any literal or variable information available to the returnimages function, in any order that you desire. But it must end up producing an array like the one that the script is expecting.

[formadmin]

cool, thanks John!

so, this is the final version I went with:

<?
Header("content-type: application/x-javascript");

function returnimages($dirname=".") { 
   $pattern="\.(jpg|jpeg|png|gif|bmp)$";
   $files = array();
   $filelocation = "/images/movie_images/";
   $curimage=0;
   if($handle = opendir($dirname)) {
       while(false !== ($file = readdir($handle))){
               if(eregi($pattern, $file)){
		 $filedate=date ("M d, Y H:i:s", filemtime($file));
                 echo 'fadeimages[' . $curimage .']=["' . $filelocation . $file . '", ""];' . "\n";
                 $curimage++;
               }
       }

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

echo "var fadeimages=new Array();" . "\n";
returnimages();
?>

(and yes, you need the beginning and trailing slashes in the $filelocation declaration)

it works great! thanks for all the help

[szeremeta]

I found this thread both very helpful and immensly annoying!! (WHY DELETE THE LINKS!?!?!)

here is how I got the slideshwo to read in a directory of images using ASP. Thanks to John for the pointers.

Use this chunk of script instead of the manually written array, this will read in the DIR of images:

<script type="text/javascript">

var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
	dimensions: [760, 200], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
	<%
	' The Runtime code:
	' Create some asp variables for
	Dim strPath   'Path of directory
	Dim objFSO    'FileSystemObject variable
	Dim objFolder 'Folder variable
	Dim objItem   'Variable used to loop through the contents of the folder

	' You could just as easily read this from some sort of input
	' NOTE: As currently implemented, this needs to end with the /
	strPath = "./banner/"

	' Create our FSO
	Set objFSO = Server.CreateObject("Scripting.FileSystemObject")

	' Get a handle on our folder
	Set objFolder = objFSO.GetFolder(Server.MapPath(strPath))

	'Create some javascript variables
	%>
	//var counter=0
	//var imagearray=new Array()
	<%

	'Selecting only images
	Set RegExObj = New RegExp
	With RegExObj
	.Pattern = "gif|jpg|png"
	.IgnoreCase = True
	End With
	For Each objItem In objFolder.Files
	If RegExObj.Test(Right(objItem.Name, 3)) Then
	'Add each one to the array using javascript
	%>
		["banner/<%= objItem.Name %>", "", "", ""],
	<%
	End If
	Next 'objItem

	' All done!  Kill off our asp object variables.
	Set objItem = Nothing
	Set objFolder = Nothing
	Set objFSO = Nothing
	Set RegExObj = Nothing
	%>
	],
	displaymode: {type:'auto', pause:5000, cycles:0, wraparound:false},
	persist: true, //remember last viewed slide and recall within same session?
	fadeduration: 1000, //transition duration (milliseconds)
	descreveal: "ondemand",
	togglerid: ""
})

</script>