Comveyor Belt script / random images and multiple images

[MangledPuppy]

1) Script Title:
Conveyor Belt Slideshow script

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

3) Describe problem:
The script itself is working ok. I would like to tweak it so it generates a random image from the start (for which I've found a few lines of code here as well) but since there's about 100+ images in this directory I'm using I'm trying something different.
I'm trying to implement this separate randomizing script.

- using the random script in the location of img src does generate a random image when first accessing or reloading the page, however the random image is then repeated
The line of code where the random image is called is

leftrightslide[1]='<a href="#"><img src="img/pics/rotate.php" border=0></a>'

so because it's only one line it can be expected that only one random image is called.
Question is on how I can generate a random image and how can any image generated by the conveyor script be random?

- I read elsewhere on this forum that more than 10 images or so might cause problems; question is
.....why is that?
......is this script capable of calling images from a directory of 100+ images?

Thanks!
(for helpful input)


-

[jscheuer1]

They say they have a way to solve that problem (of the same image being grabbed each time):

http://hivelogic.com/articles/2003/04/the-cache-trick

I would prefer using a query value generated by a time string, as random identifiers could though not too likely, repeat.

Since this is already javascript, you could try just doing it like so:

leftrightslide[1]='<a href="#"><img src="img/pics/rotate.php?id=' + new Date().valueOf() + '" border=0></a>'

But, since you are generating a random image to begin with, there still could be duplicates. Random means random, it does not mean unique.

If you simply generated (using PHP) the full list of 100 (or whatever number) images as a javascript array, these could be randomized, then the first 10 used. That would get you random and unique.

I'm not aware of any limitation on the number of images per se. However, since all of the images must load before the Conveyor will work, there could be practical issues as far as the byte load of your 'image train'.

Also, since the script uses a span element that it generates with this line (notice highlight) to measure the width of the 'train':

document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+leftrightslide+'</span>')

If your image train is longer than 9000 pixels, there will be a horizontal scrollbar. However, the number 9000 may be increased.

[MangledPuppy]

Unfortunately both suggestions do not work.

I've tried the cache trick and also tried the snippet you suggested but whenever I load a page there's image 1 being loaded and repeated indefinitely.
When I load or reload the same page, it shows a different picture, say image 2, which is then repeated indefinitely.
I'm sorta confused as to what you mean by

If you simply generated (using PHP) the full list of 100 (or whatever number) images as a javascript array, these could be randomized, then the first 10 used. That would get you random and unique.

. Can you elaborate?

[jscheuer1]

Yes. But it may take a little back and forth to get it working for you, it depends upon how much PHP knowledge you have, and how lucky we are with your server, and if I can lay this all out correctly and clearly the first time or not.

Make a file in a text only editor like NotePad:

<?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)){
                 echo 'galleryarray[' . $curimage .']=["' . $file . '"];' . "\n";
                 $curimage++;
               }
       }

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

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

Save it as gallerypics.php and put it in the folder that has the images in it (for now I will assume that's img/pics/ and that this is the valid path to it from your page)

Then on the page, before the Conveyor script, put:

<script type="text/javascript" src="img/pics/gallerypics.php"></script>

Then, in the beginning of the Conveyor script put (addition red):

<script type="text/javascript">

/***********************************************
* Conveyor belt slideshow script- © 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 full source code
***********************************************/

galleryarray.sort(function() {return 0.5 - Math.random();});
var ccounter = 0;

//Specify the slider's width (in pixels)
var sliderwidth="300px"
//Specify the slider's height
var sliderheight="150px"
//Specify the slider's slide spe . . .

Once we have all that, the entries in the leftrightslide array can look like so:

leftrightslide[1]='<a href="#"><img src="img/pics/' + galleryarray[ccounter++] + '" border=0></a>'