Results 1 to 5 of 5

Thread: Ultimate Slideshow--first 2 slides repeat

  1. #1
    Join Date
    Jun 2009
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Ultimate Slideshow--first 2 slides repeat

    1) Script Title: Ultimate Slideshow v1.5

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...nslideshow.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:

    Code:
    /***********************************************
    * 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);
    }

  2. #2
    Join Date
    Jun 2009
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    Jun 2009
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

    Code:
    <?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.

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

    1. fadepic
    2. fadeshow.prototype.resetit


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

    Edit: 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.
    Last edited by jscheuer1; 09-30-2009 at 02:21 PM. Reason: Add info
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •