Ultimate Fade In Slideshow

Can anyone show me what modifications to make to this script:

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

So that it preloads ALL the images in a given directory before playing them in two windows.


Thanks in advance very much!

Nelson

Is there another script that will use PHP or something to fetch all the images in a given directory that I can combine with the ultimate fade in slideshow code to allow an entire directory of images to be loaded without specifying a number of photos?

This script still doesn't work for me with FX... anyway.

Code:

---

<?php
// getpics.php
$directory = "images"; // Directory in which the images are stored, relative to the location of this script.  Must have the slash.

header("Content-Type: text/javascript");
$dir = opendir($directory);
while($file = readdir($dir))
  if(strpos($file, ".") === 0) continue;
  else echo("fadeimages[0]=['$directory/$file', '', ''];\n");
?>

---

Where you would normally have the array values:

Code:

---

</script><script src="getpics.php" type="text/javascript"></script><script>

---

Make sure getpics.php is in the same directory as the page containing the script, and change the $directory variable to point to the directory.

Thank you very much! I shall try that out!

Nelson

Made a slight error. Should be:

Code:

---

<?php
// getpics.php
$directory = "images"; // Directory in which the images are stored, relative to the location of this script.  Must have the slash.

header("Content-Type: text/javascript");
$dir = opendir($directory);
for($i=0;$file = readdir($dir);$i++)
  if(strpos($file, ".") === 0) continue;
  else echo("fadeimages[$i]=['$directory/$file', '', ''];\n");
?>

---

Please forgive my stupidity, but I did something wrong.

I placed your code in a PHP file - getpics2.php (I already had a getpics from the photo album script). I changed the directory link to "/Graphics" where I store the files, and I added the line of invocation where the array definitions were. (see below), and I am getting error messages. What did I do wrong? Thanks.

<script type="text/javascript">
/***********************************************
* Ultimate Fade-In Slideshow (v1.5): © Dynamic Drive (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

</script><script src="getpics2.php" type="text/javascript"></script><script>

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

var fadearray=new Array() //array to cache fadeshow instances
var fadeclear=new Array() //array to cache corresponding clearinterval pointers

var dom=(document.getElementById) //modern dom browsers
var iebrowser=document.all

function fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay, pause, displayorder){
this.pausecheck=pause
this.mouseovercheck=0
this.delay=delay
this.degree=10 //initial opacity degree (10%)
this.curimageindex=0
this.nextimageindex=1
fadearray[fadearray.length]=this
this.slideshowid=fadearray.length-1
this.canvasbase="canvas"+this.slideshowid
this.curcanvas=this.canvasbase+"_0"
if (typeof displayorder!="undefined")
theimages.sort(function() {return 0.5 - Math.random();}) //thanks to Mike (aka Mwinter) :)
this.theimages=theimages
this.imageborder=parseInt(borderwidth)
this.postimages=new Array() //preload images
for (p=0;p<theimages.length;p++){
this.postimages[p]=new Image()
this.postimages[p].src=theimages[p][0]
}

It needs to be relative to the script, because / is a different place from the points of view of the script and the browser.

I'm still getting a syntax error and an error that fadeimages1 and 2 are undefined.

May we see your page?

http://www.protestantlawyersny.org/test.htm

is the test page I made.

and the getpics2.php script is:

<?php
// getpics.php
$directory = "Graphics/Thumbnails/"; // Directory in which the images are stored, relative to the location of this script. Must have the slash.

header("Content-Type: text/javascript");
$dir = opendir($directory);
for($i=0;$file = readdir($dir);$i++)
if(strpos($file, ".") === 0) continue;
else echo("fadeimages[$i]=['$directory/$file', '', ''];\n");
?>

Aha... I have it.
Replace

Code:

---

if(strpos($file, ".") === 0) continue;

---

with

Code:

---

if(strpos($file, ".") === 0) {
  $i--;
  continue;
}

---

Oh, and the slash isn't necessary, I've no idea why I said it was. :)

The PHP file now reads:

<?php
// getpics.php
$directory = "Graphics/Thumbnails"; // Directory in which the images are stored, relative to the location of this script. Must have the slash.

header("Content-Type: text/javascript");
$dir = opendir($directory);
for($i=0;$file = readdir($dir);$i++)
if(strpos($file, ".") === 0) {
$i--;
continue;
}

and I uploaded it.

However, the page still generates errors:

http://www.protestantlawyersny.org/test.htm

I'm hopeless!

You missed half the script off the end. I'm not surprised.
It should read:

Code:

---

<?php
// getpics.php
$directory = "."; // Directory in which the images are stored, relative to the location of this script. Must have the slash.

header("Content-Type: text/javascript");
$dir = opendir($directory);
for($i=0;$file = readdir($dir);$i++)
if(strpos($file, ".") === 0) {
  $i--;
  continue;
} else echo("fadeimages[$i]=['$directory/$file', '', ''];\n");
?>

---

Twey,

I'm extremely grateful for your solution.

It does have a couple of issues:

1- I no longer can show two pictures side by side
(the second array doesnt seem to load)

2- there is an error generated on the page

3- the link effect on each pic is no longer enabled (not that I really see a need for such an effect).

The link for the page is:

http://www.protestantlawyersny.org/test.htm

Nelson

Quote:

---

3- the link effect on each pic is no longer enabled (not that I really see a need for such an effect).

---

There is no way my script can tell to whence you wish it to link. You'd have to enter the links manually, and my reasoning was that in that case you might as well do the images manually as well.

As for the other two, you need to save the PHP script as a different file, and edit the variable name it outputs.

Ahhh, thank you Twey.

Thanks to you, the script works very well and loads all the photos in the directory.

http://www.protestantlawyersny.org/test.htm is the page demo for any looking to modify the ultimate fade in slideshow to load an entire directory rather than specified filenames.

I needed to specify the entire directory because the photographer who took the photos digitally gave them very long filenames (12 digits) and entering them individually was a major headache.

One final question -
While it may be impossible to add a link to each photo now, is there a way to add something to your PHP script so that I can add just ONE url to any photo that is loaded so that the user can click on ANY photo and get to the photo gallery page where all the photos are kept? If it isn't possible, no biggie, I was just wondering.

Thanks.

Learning a lot...

Nelson

Of course -- just put the URL to your photo gallery inside the first empty pair of quotes.

Twey:

The PHP script works wonderfully- thanks.

However, it does tend to slow down the loading of the page.
I need some sort of preloader that can be added to the PHP script to preload the entire directory of images.

I found this PHP preload script on the net:


<?
$my_directory = ("Your Directory");
$dir = dir($my_directory);
while($temp = $dir->read())
{
$dirarray[] = $temp;
}
print j_array($dirarray);

function j_array($var){
$javastr = "<script language=\"javascript\">";
$javastr .= "var d = new Array();";
$diro="Pictures/";
while(list($key, $val) = each($var)){
$javastr .= "d[$key] = new Image();";
$javastr .= "d[$key].src = '$diro$val';";
}
$javastr .= "</script>";
return $javastr;
}
?>



Can this code be integrated into your PHP script. If so, how would I do it? If not, is there a way that I can run this on my test page so that the images from both slideshows will be preloaded first? The end result would be a MUCH improved fading slideshow that PRELOADS all images and then runs ALL images from a given folder or directory.

Thanks!

Nelson

http://www.protestantlawyersny.org/index.htm

Of course...

Code:

---

<?php
// getpics.php
$directory = "."; // Directory in which the images are stored, relative to the location of this script.

header("Content-Type: text/javascript");
$dir = opendir($directory);
for($i=0;$file = readdir($dir);$i++)
  if(strpos($file, ".") === 0) {
    $i--;
    continue;
  } else if(isset($_GET['preload'])) {
    echo("(new Image()).src = '$directory/$file';\n");
  } else echo("fadeimages[$i]=['$directory/$file', '', ''];\n");
?>

---

Include it in the head of your page:

Code:

---

<script type="text/javascript" src="getpics.php?preload"></script>

---

I'm getting an error.

I installed it in the test.htm file as before:
http://www.protestantlawyersny.org/test.htm


var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
</script><script type="text/javascript" src="getpics2.php?preload"></script><script>

var fadeimages2=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
</script><script type="text/javascript" src="getpics3.php?preload"></script><script>


var fadebgcolor="#000066"

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

var fadearray=new Array() //array to cache fadeshow instances
var fadeclear=new Array() //array to cache corresponding clearinterval pointers



and the two versions of the PHP file are:

<?php
// getpics.php
$directory = "Graphics/Installation_2006/Thumbnails/"; // Directory in which the images are stored, relative to the location of this script.

header("Content-Type: text/javascript");
$dir = opendir($directory);
for($i=0;$file = readdir($dir);$i++)
if(strpos($file, ".") === 0) {
$i--;
continue;
} else if(isset($_GET['preload'])) {
echo("(new Image()).src = '$directory/$file';\n");
} else echo("fadeimages[$i]=['$directory/$file', '', ''];\n");
?>


and


<?php
// getpics.php
$directory = "Graphics/Installation_2006/Thumbnails/"; // Directory in which the images are stored, relative to the location of this script.

header("Content-Type: text/javascript");
$dir = opendir($directory);
for($i=0;$file = readdir($dir);$i++)
if(strpos($file, ".") === 0) {
$i--;
continue;
} else if(isset($_GET['preload'])) {
echo("(new Image()).src = '$directory/$file';\n");
} else echo("fadeimages2[$i]=['$directory/$file', '', ''];\n");
?>

The error is generated when I add the preload function to the script command: "?preload".
I have two slideshows running simultaneously, side by side.

I am kind of lost.

Nelson

No no no. Leave the array bits as they are. In the <head> of your document, without changing anything else, add

Code:

---

<script type="text/javascript" src="getpics2.php?preload"></script>
<script type="text/javascript" src="getpics3.php?preload"></script>

---

That's it! Thanks!

http://www.protestantlawyersny.org/test.htm

It works very well now, though takes a while to load with all the images. I realize that since both getpics2.php and getpics3.php point to the same directory of images (Graphics/2006_Installation/Thumbnails/) that I am reloading the same images twice (although I could also use the second array to load a whole new folder of images as well)

What if I placed these two lines into one of these preload splash pages so that, by the time it redirects to the home page, everything is loaded?


Nelson

If they both point to the same directory, you can get away with only putting one of them in.

Yep, you can put them wherever you like.

If I understand correctly, the script you wrote can be used to load an entire directory notwithstanding its use in connection with the ultimate fading slideshow script. Thus, I can use it in a preload page to load all the images for the site so that the site will run much more smoothly, which is wonderful!

Thanks again for all your help!

Nelson

's right :)