PDA

View Full Version : Ultimate Fade In Slideshow



nelsontimken
05-30-2006, 07:05 PM
Can anyone show me what modifications to make to this script:

http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

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


Thanks in advance very much!

Nelson

nelsontimken
06-01-2006, 04:29 PM
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?

Twey
06-01-2006, 04:43 PM
This script still doesn't work for me with FX... anyway.
<?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:
</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.

nelsontimken
06-01-2006, 09:56 PM
Thank you very much! I shall try that out!

Nelson

Twey
06-01-2006, 10:27 PM
Made a slight error. Should be:
<?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");
?>

nelsontimken
06-02-2006, 12:36 PM
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]
}

Twey
06-02-2006, 01:11 PM
It needs to be relative to the script, because / is a different place from the points of view of the script and the browser.

nelsontimken
06-03-2006, 01:44 AM
I'm still getting a syntax error and an error that fadeimages1 and 2 are undefined.

Twey
06-03-2006, 11:18 AM
May we see your page?

nelsontimken
06-03-2006, 02:11 PM
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");
?>

Twey
06-03-2006, 02:15 PM
Aha... I have it.
Replace
if(strpos($file, ".") === 0) continue; with
if(strpos($file, ".") === 0) {
$i--;
continue;
}Oh, and the slash isn't necessary, I've no idea why I said it was. :)

nelsontimken
06-03-2006, 02:52 PM
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!

Twey
06-05-2006, 04:32 PM
You missed half the script off the end. I'm not surprised.
It should read:
<?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");
?>

nelsontimken
06-05-2006, 07:34 PM
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

Twey
06-05-2006, 08:30 PM
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.

nelsontimken
06-06-2006, 12:19 AM
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

Twey
06-06-2006, 11:25 AM
Of course -- just put the URL to your photo gallery inside the first empty pair of quotes.

nelsontimken
06-12-2006, 03:18 PM
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

Twey
06-12-2006, 03:59 PM
Of course...
<?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:
<script type="text/javascript" src="getpics.php?preload"></script>

nelsontimken
06-12-2006, 11:36 PM
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

Twey
06-13-2006, 01:07 PM
No no no. Leave the array bits as they are. In the <head> of your document, without changing anything else, add
<script type="text/javascript" src="getpics2.php?preload"></script>
<script type="text/javascript" src="getpics3.php?preload"></script>

nelsontimken
06-13-2006, 04:46 PM
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

Twey
06-13-2006, 04:49 PM
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.

nelsontimken
06-13-2006, 08:14 PM
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

Twey
06-13-2006, 08:28 PM
's right :)