Ultimate Slideshow--first 2 slides repeat

[ontheroof]

1) Script Title: Ultimate Slideshow v1.5

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm (now on different version)

3) Describe problem: first 2 slides repeat, and don't fade properly.

first two images repeat and look pretty jumpy. so the order is 1,2,1,2,3,4... the rest looks fine. you can see it here:

http://www.ojoblanco.com/

i've searched through the forums but can't see any other users with the same problem. i have modified the script a little, but only to strip out inline styles, and add a dynamic array. any help is greatly appreciated.

this is the version of the script i am using:



/***********************************************
* Ultimate Fade-In Slideshow (v1.5): Copyright 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.
* Updated for better Safari Compliance + progress bar on preload
* by jscheuer1 in http://www.dynamicdrive.com/forums
***********************************************/

var fadebgcolor="transparent"

////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)
var fadewidth=fadewidth+this.imageborder*2
var fadeheight=fadeheight+this.imageborder*2
this.postimages=new Array() //preload images
if (iebrowser&&dom||dom) { //if IE5+ or modern browsers (ie: Firefox)
document.write('<div id="imgDiv'+this.slideshowid+'" style="display:none;">')
for (var i_tem = 0; i_tem < this.theimages.length; i_tem++)
document.write('<img src="'+this.theimages[i_tem][0]+'">\n')
document.write('</div>')

for (var p=0;p<theimages.length;p++){
this.postimages[p]=new Image()
this.postimages[p].src=document.getElementById('imgDiv'+this.slideshowid).getElementsByTagName('img')[p].src
}
document.write('<div style="width:'+fadewidth+'%;height:'+fadeheight+'%;" class="zero"><!-- crossbrowser images_loading_bar - Gerard Ferrandez - www.dhteumeuleu.com - Feb 2005 -->\n')
document.write('<span id=LB0'+this.slideshowid+' style="position:absolute;left:50%;top:50%;"><span style="position:absolute;font-family:arial;font-size:10px;color:#666666;left:-50px;top:-18px">Loading...</span>\n')
document.write('<span style="position:absolute;left:-50px;top:-5px;font-size:1px;width:100px;height:10px;background:#333"><span id=LB1'+this.slideshowid+' style="position:absolute;left:0;top:0;font-size:1px;width:0;height:10px;background:#666666"></span></span></span>\n')
document.write('<div id="show'+this.slideshowid+'" style="visibility:hidden;">\n')
}

else
for (var p=0;p<theimages.length;p++){
this.postimages[p]=new Image()
this.postimages[p].src=theimages[p][0]
}

if (iebrowser&&dom||dom) {//if IE5+ or modern browsers (ie: Firefox)
var filtering=typeof document.body.style.opacity!=='string'? 'filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);-khtml-opacity:10;-moz-opacity:10;' : ''
document.write('<div id="master'+this.slideshowid+'" style="width:'+fadewidth+'%;height:'+fadeheight+'%;overflow:hidden;" class="zero"><div id="'+this.canvasbase+'_0" style="width:'+fadewidth+'%;height:'+fadeheight+'%;'+filtering+'opacity:10;background-color:'+fadebgcolor+'" class="zero"></div><div id="'+this.canvasbase+'_1" style="width:'+fadewidth+'%;height:'+fadeheight+'%;'+filtering+'opacity:10;background-color:'+fadebgcolor+'" class="zero"></div></div></div></div>')
}
else
document.write('<div><center><img name="defaultslide'+this.slideshowid+'" src="'+this.postimages[0].src+'" class="fake"></center></div>')

if (iebrowser&&dom||dom) //if IE5+ or modern browsers such as Firefox
this.images_loading_bar()
else{
this.curimageindex++
setInterval("fadearray["+this.slideshowid+"].rotateimage()", this.delay)
}
}

function fadepic(obj){
if (obj.degree<100){
obj.degree+=10
if (obj.tempobj.filters&&obj.tempobj.filters[0]){
if (typeof obj.tempobj.filters[0].opacity=="number") //if IE6+
obj.tempobj.filters[0].opacity=obj.degree
else //else if IE5.5-
obj.tempobj.style.filter="alpha(opacity="+obj.degree+")"
}
else if (obj.tempobj.style.MozOpacity)
obj.tempobj.style.MozOpacity=obj.degree/101
else if (obj.tempobj.style.KhtmlOpacity)
obj.tempobj.style.KhtmlOpacity=obj.degree/100
else if (obj.tempobj.style.opacity&&!obj.tempobj.filters)
obj.tempobj.style.opacity=obj.degree/101
}
else{
clearInterval(fadeclear[obj.slideshowid])
obj.nextcanvas=(obj.curcanvas==obj.canvasbase+"_0")? obj.canvasbase+"_0" : obj.canvasbase+"_1"
obj.tempobj=iebrowser? iebrowser[obj.nextcanvas] : document.getElementById(obj.nextcanvas)
obj.populateslide(obj.tempobj, obj.nextimageindex)
obj.nextimageindex=(obj.nextimageindex<obj.postimages.length-1)? obj.nextimageindex+1 : 0
setTimeout("fadearray["+obj.slideshowid+"].rotateimage()", obj.delay)
}
}

fadeshow.prototype.populateslide=function(picobj, picindex){
var slideHTML=""
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML='<a href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'">'
slideHTML+='<img src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px" class="fake">'
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML+='</a>'
picobj.innerHTML=slideHTML
}


fadeshow.prototype.rotateimage=function(){
if (this.pausecheck==1) //if pause onMouseover enabled, cache object
var cacheobj=this
if (this.mouseovercheck==1)
setTimeout(function(){cacheobj.rotateimage()}, 100)
else if (iebrowser&&dom||dom){
this.resetit()
var crossobj=this.tempobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
crossobj.style.zIndex++
fadeclear[this.slideshowid]=setInterval("fadepic(fadearray["+this.slideshowid+"])",50)
this.curcanvas=(this.curcanvas==this.canvasbase+"_0")? this.canvasbase+"_1" : this.canvasbase+"_0"
}
else{
var ns4imgobj=document.images['defaultslide'+this.slideshowid]
ns4imgobj.src=this.postimages[this.curimageindex].src
}
this.curimageindex=(this.curimageindex<this.postimages.length-1)? this.curimageindex+1 : 0
}

fadeshow.prototype.resetit=function(){
this.degree=10
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
if (crossobj.filters&&crossobj.filters[0]){
if (typeof crossobj.filters[0].opacity=="number") //if IE6+
crossobj.filters(0).opacity=this.degree
else //else if IE5.5-
crossobj.style.filter="alpha(opacity="+this.degree+")"
}
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=this.degree/101
else if (crossobj.style.KhtmlOpacity)
crossobj.style.KhtmlOpacity=this.degree/100
else if (crossobj.style.opacity&&!crossobj.filters)
crossobj.style.opacity=this.degree/101
}


fadeshow.prototype.startit=function(){
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
this.populateslide(crossobj, this.curimageindex)
if (this.pausecheck==1){ //IF SLIDESHOW SHOULD PAUSE ONMOUSEOVER
var cacheobj=this
var crossobjcontainer=iebrowser? iebrowser["master"+this.slideshowid] : document.getElementById("master"+this.slideshowid)
crossobjcontainer.onmouseover=function(){cacheobj.mouseovercheck=1}
crossobjcontainer.onmouseout=function(){cacheobj.mouseovercheck=0}
}
this.rotateimage()
}

fadeshow.prototype.images_loading_bar=function(){
var m00=document.getElementById('imgDiv'+this.slideshowid).getElementsByTagName('img');
var m01=m00.length;
var m02=0;
for(var i=0;i<m01;i++)
m02+=(m00[i].complete)?1:0;
document.getElementById('LB1'+this.slideshowid).style.width=Math.round(m02/m01*100)+'px';
if(m02==m01){setTimeout("document.getElementById('LB0"+this.slideshowid+"').style.display='none';document.getElementById('show"+this.slideshowid+"').style.visibility='visible';fadearray["+this.slideshowid+"].startit()",300);}
else setTimeout("fadearray["+this.slideshowid+"].images_loading_bar()", 64);
}

[ontheroof]

hmmn, nobody is commenting here. i thought maybe i should add that i used this version of the script because it has a preloader with a progress bar. i noticed that in an earlier version of the script, the same problem does *not* exist. so i will compare the two scripts to try to figure out what is different...

by the way, this is a great script! cheers to all the people who have made this what it is.

[jscheuer1]

I had looked at this earlier and noticed that you had made some changes to the preloader version in order to accommodate your other script and the layout it enables. I noticed that relative positioning was 'out the window', and that dimensions were all set to 100%, rather than in pixels. Though one or more of these may have caused the issue, I couldn't put my finger on it. It also could be other things, for example a conflict with your other script might be at issue. The preloader script without your modifications works fine though if it is the only script on a page.

[ontheroof]

the php i use to load the images from a folder is this:



<?php

function getDirectory( $path = '.', $level = 0 ){

$ignore = array( 'cgi-bin', '.', '..' );
// Directories to ignore when listing output. Many hosts
// will deny PHP access to the cgi-bin.

$files = array();

$curimage=0;

$dh = @opendir( $path );
// Open the directory to the handle $dh

while( false !== ( $file = readdir( $dh ) ) ){
// Loop through the directory

if( !in_array( $file, $ignore ) ){
// Check that this file is not to be ignored

if( is_dir( "$path/$file" ) ){
// Its a directory, so we need to keep reading down...

getDirectory( "$path/$file", ($level+1) );
// Re-call this same function but on a new directory.
// this is what makes function recursive.

} else {

if (strpos($file, '.jpeg',1)||strpos($file, '.jpg',1) ) {
//if this file is a valid image output it as a JavaScript array element

echo 'fadeimages['.$curimage.']=["'. $path .'/'. $file .'", "", ""]'."\n";
$curimage++;
// Just print out the filename

}

}

}

}

closedir( $dh );
// Close the directory handle

}

echo '<script type="text/javascript">' . "\n";
echo 'var fadeimages=new Array()' . "\n"; //Define array in JavaScript
getDirectory( "slide" ); // Get the current directory
echo 'new fadeshow(fadeimages, 100, 100, 0, 3000, 1, "R");' . "\n";
echo '</script>';

?>


it's true that the script with a javascript array works well, but the scripts aren't exactlty the same (i think some things may have been changed for browser compatibility???). i am still quite new to javascript and php, so i don't really understand a lot of this. what i *wanted* to do was simply to strip out some of the inline styles (and use a css style sheet) and also use php to get the images from a specific folder. both of those objectives seem to be working (using an external style sheet, and using php to find the images in a specific folder--both are working), but the javascript seems to be choking on the first two images. after the first two, everything works fine... the only part of the script that *appears* to be different is the part that calls for a preloading progress bar.

[jscheuer1]

I'm not sure if you are still asking a question or not. However, the changes you made to the script could be significant. Not only have you farmed out some of the style to your stylesheet, you have also changed the the actual values of some of the style properties. In one or more instances you have substituted absolute positioning for relative positioning (the script originally used both). You also have set width and height in percent as opposed to pixels. Either of these can sometimes have unexpected consequences.

But, and I couldn't see if this was the case or not, the most important changes would probably be any that affect the visibility style property. The images or their immediate containers I think it is, are supposed to start out visibility hidden. Once the first two images are fully loaded, these containers are then supposed to become visible, and the progress bar disappears. If you at any point see both the progress bar and the images at the same time (which I believe is the case), this means you have done something that affects this in some way, either by directly changing the visibility style property or in some indirect manner. I'll take a closer look if the page is still up and running with the preloader version.

You're right about the differences between the preloder (as I had written it) and the original version 1.5 though. The only differences in the preloading script and the original version 1.5 of U-Fade were the addition of better browser compatibility and the preload bar routine.

If you want to revert to the original version 1.5 but keep the browser compatibility upgrade, you want version 1.51. Or you could simply replace these functions in an original copy of 1.5:


fadepic
fadeshow.prototype.resetit


with the ones of the same names in the preloader script.

Added Later:
Well I double checked and you have the correct visibility styles and they appear to be working. However, when I revert the positioning of the master0 division back to relative (as it was meant to be), none of the images show up, so I think this has something to do with it.