javascript slideshow preload problems

gameonedne

03-13-2012, 11:58 PM

Hi everyone!
My slide show doesn't preload correctly.
I have a slideshow made with Javascript. It uses PHP to automatically load images in it from a folder.

it consists of a php file that resides in the image folder and a html page with the javascript code that contains the slide show and a image preloader. but the images don't load well. And I can't figure out the mistake.

I don't expect any instant solutions, but some advice would be very appreciated.

the php file:
<?
//PHP SCRIPT: getimages.php
Header("content-type: application/x-javascript");

//This function gets the file names of all images in the current directory
//and ouputs them as a JavaScript array
function returnimages($dirname=".") {
$pattern="/(\.jpg$)|(\.png$)|(\.JPG$)|(\.jpeg$)|(\.gif$)/"; //valid image extensions
$files = array();
$curimage=0;
if($handle = opendir($dirname)) {
while(false !== ($file = readdir($handle))){
if(preg_match($pattern, $file)){ //if this file is a valid image
//Output it as a JavaScript array element
echo 'galleryarray['.$curimage.']="'.$file .'";';
$curimage++;

}
}echo 'var totalamount ="'.$curimage.'";';

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

echo 'var galleryarray=new Array();

'; //Define array in JavaScript
returnimages() //Output the array elements containing the image file names
?>

the HTML file:

<head>

<link type="text/css" rel="stylesheet" href="style.css"/>

<script src="images/slideshow2/getimages.php"></script>

<script language=”javascript”>
var imageObject = new Image();

for(i=0; i<totalamount; i++ )
{
imageObject.src = "images/slideshow2/"+galleryarray[i];
}
</script>

<script type="text/javascript">

var curimg=0
function rotateimages(){
document.getElementById("slideshow").setAttribute("src", "images/slideshow2/"+galleryarray[curimg])
curimg=(curimg<galleryarray.length-1)? curimg+1 : 0
if (document.getElementById) document.getElementById("CaptionBox").innerHTML= galleryarray[curimg];

}

window.onload=function(){
setInterval("rotateimages()", 3700)
}

</script>
</head>

<div style="width: 500px;">
<img id="slideshow" src="images/slideshow2/image1.jpg"/ width=500>
</div>
<div style="
-webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -moz-transform-origin: bottom left; filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);"
id=CaptionBox class=Caption>
<a> This is the default caption.
</a> </div>

VERY CURIOUS :D
best Sam

webdev1958

03-14-2012, 12:22 AM

.....but the images don't load well.

That's a bit like going to the doctor and saying "I don't feel well - what is wrong?" and not saying anything else and then expect the doctor to fix you.

What error messages are you getting? What exatly is/isn't happening that should/shouldn't? Are any images loading and if so how many?

If you wrote all that code, it should take you only a couple of minutes to at least identify the problem area in your code by using echo statements to check variables' values and program logic.

gameonedne

03-14-2012, 12:42 AM

Okay, sorry
The actual problem is that the images do appear in the slideshow, but just nog preloaded, cause they still load from top to bottom, instead of just in an instance.
The preload script should fix that, but it doesn't, so the error must be in this code I think:
<script language=”javascript”>
var imageObject = new Image();

for(i=0; i<totalamount; i++ )
{
imageObject.src = "images/slideshow2/"+galleryarray[i];
}
</script>

most common mistake is the wrong URL, but that seems to be correct.
but since I am a newbe, I can't recognize the wrong thing here. Off course the code is lent from several website. Just glued together by me.

Hope I have been more specific now.
thanks, best Sam

webdev1958

03-14-2012, 01:11 AM

.....Off course the code is lent from several website. Just glued together by me.

ok, that's what I suspected.

I don't get involved in fixing up other peoples' cobbled together bits and pieces of code from various sources.

It's quicker for me to write my own code from scratch than to spend time debugging cobbled together code.

If you would like to learn how to do it properly, then have a go at it and I will be happy to help. If you want someone to debug the cobbled together bits and pieces you posted then hopefully someone else will come along.

Good luck :)

Logic Ali

03-14-2012, 02:17 AM

The preload script should fix that, but it doesn't, so the error must be in this code I think:
<script language=”javascript”>
var imageObject = new Image();

for(i=0; i<totalamount; i++ )
{
imageObject.src = "images/slideshow2/"+galleryarray[i];
}
</script>most common mistake is the wrong URL, but that seems to be correct
Another common mistake is trying to load all the images into one placeholder effectively at the same time, meaning that only the last one will load.

var imageObjects = [], img;

for( var i=0; i<totalamount; i++ )
{
img = new Image();
img.src = "images/slideshow2/"+galleryarray[i];
imageObjects.push( img );
}