Ultimate Fade-in slideshow (v2.1)-preload images

[rkk]

1) Script Title: Ultimate Fade-in slideshow (v2.1)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...nslideshow.htm

3) Describe problem: preload images

Hi, I love the script however

1) like the DHTML Slide Show Script i would like to have it preload the images...im assuming it doesnt since you dont mention it in its key features

2) i dont know if this is possible but I WOULD LOVE YOU GUYS if you could make the slide show AUTO LOAD images from a folder on a server...see this script which i think is flash based for what im talking about http://www.flashnifties.com/flash_gallery.php
ie for the images to display in the slideshow instead of having to type a long list of images, the script would just know to look for all images within a folder on your server and automatically create the slideshow from it...

[jscheuer1]

The script already preloads the images. This is such a basic requirement for most slide shows that I imagine the author chose not to mention it. As for importing the array of images from a folder, this would require PHP or another server side language, or it could be done via javascript if certain naming conventions were observed for the image files.

The easiest is PHP if you have that available, do you?

[rkk]

ive never used PHP but am looking at a site with tutorials and looking for auto load scripts...so if i should find one...do i need to mess with the .js file or will i just need to mess with the script in the header

[jscheuer1]

At first, it really doesn't matter. If your server doesn't provide you with a PHP interface, you can't use it anyway. That's why I asked if you have it available. I suppose I should have been more specific:

Does your live host provide PHP?

If so, although my knowledge in this area is rather limited compared to my knowledge of javascript, grabbing a list of files from a directory is pretty simple in PHP and I can guide you through setting it up.

The main issue is whether or not your server provides you with PHP. Does it?

If you don't know, copy this code to a plain text editor:

<?php
phpinfo();
?>

Save it as info.php and upload it to the main folder of your live site. Navigate to it. If your host supports PHP for your use, you will see a panoply of statistics, if not - you will see little or nothing.

[rkk]

yes it supporsts PHP Version 4.4.7

[jscheuer1]

OK, we are half way home on the PHP support front. There may still be issues with your host not allowing folder reads and filename retrieval, but that is unusual, so let's not worry about that unless it happens. That said, here is the PHP file to use:

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

function returnimages($dirname="./images/") {
   $pattern="\.(jpg|jpeg|png|gif|bmp)$";
   $files = array();
   $curimage=0;
   if($handle = opendir($dirname)) {
       while(false !== ($file = readdir($handle))){
               if(eregi($pattern, $file)){
                 echo 'galleryarray[' . $curimage .']=["' . $dirname . $file . '"];' . "\n";
                 $curimage++;
               }
       }

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

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

Save it as - say, getpics.php and notice this line:

function returnimages($dirname="./images/") {

the . represents the folder that your page is in, the /images/ is the folder off of the folder where your page is that contains the images. Edit that if need be to reflect the actual folder name (it must be a folder off of the folder in which your page is located), and upload the getpics.php file to the same folder as your page. Place this tag in the head of your page before the slide show's initialization:

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

var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
	dimensions: [470, 502], //width . . .

Then for the init, use:

var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
	dimensions: [470, 502], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: galleryarray,
	displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	descreveal: "ondemand",
	togglerid: ""
})

[rkk]

outstanding, this will greatly reduce my updating ...however

1. when it loads it doesnt load the first image and display it first, then the next so that viewer can start looking at gallery rather then wait for entire thing to load and have a blank space there.

2. for some reason it loads the next button, then instead of displaying image 1 of xxx, it displays some other number 42 of 76, then it renders the back button.

i got it working for two galleries right now
http://www.engagedesign.com/web2/fashion.html

http://www.engagedesign.com/web2/interiors.html

thanks a million

[jscheuer1]

For your first page, you have persistence set to true, so it will always load the last viewed image, if you want it to always start with the first image, change:

<script type="text/javascript">

var mygallery2=new fadeSlideShow({
	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
	dimensions: [461, 377], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: galleryarray,
	displaymode: {type:'manual', pause:2500, cycles:0, wraparound:true},
	persist: true, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	descreveal: "always",
	togglerid: "fadeshow1toggler"
})


</script>

to false.

As for the order in which images load on the page (your next/previous buttons), you can try preloading them in the head of the page before the scripts for the slide show:

<script type="text/javascript">
(function(){
	var ims = ['http://www.engagedesign.com/web2/images/back.png', 'http://www.engagedesign.com/web2/images/fwd.png'], pims = [];
	for(var i = 0; i < ims.length; ++i){
		pims[i] = new Image();
		pims[i].src = ims[i];
	}
})();
</script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="fadeslideshow.js">

/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

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

var mygallery2=new fadeSlideShow({
	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
	dimensions: [461, 377], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: galleryarray,
	displaymode: {type:'manual', pause:2500, cycles:0, wraparound:true},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	descreveal: "always",
	togglerid: "fadeshow1toggler"
})


</script>

As for having to load all the images, see:

http://www.dynamicdrive.com/forums/s...ad.php?t=50185

One of the two strategies in that thread should allow you to at least show an image while the others are loading.

For your second page:

http://www.engagedesign.com/web2/interiors.php

is a 404 not found.

[rkk]

something weird is happening...i didnt touch the interiors stuff and when i went to click on it later the gallery wasnt displaying...but then i periodically reloaded the page and it reappeared.

also i then went to do this for headshot section and i only had two images in a folder and i kept getting a broken image icon and no images where loading, then for some reason i thought maybe this php script needs more then 2 images in a folder to work so i uploaded more images into that folder and the gallery appeared?

[rkk]

thanks it worked...shouldve caught the first issue myself