Page 1 of 2 12 LastLast
Results 1 to 10 of 17

Thread: Problem with Ultimate Fade Script and IE8

  1. #1
    Join Date
    Nov 2009
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Problem with Ultimate Fade Script and IE8

    1) Script Title: Ultimate Fade v1.5

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

    3) Describe problem: Im trying to set up a page with 3 images slideshows on which fade into each other but they need to stagger so that they dont all fade at the same time, which is why i've used v1.5 rather than the newer v2.

    It works fine apart from on IE8 where sometimes it loses the sequence and they start fading too soon or at the same time.

    Also if you right click anywhere on the page it "pauses" the script and also messes up the sequence. It's as if the timing is still running but no fading is occurring, until you click off the right click menu, and then it will continue to fade but not in the correct sequence.

    Thanks for your help.

    Matt

  2. #2
    Join Date
    Nov 2009
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Javascript used:

    Code:
    var stagger=0 
    
    
    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, bgpic){
    this.pausecheck=pause
    this.mouseovercheck=0
    this.delayf=delay
    this.delay=delay/2
    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")
    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="position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px; background:url(/Portals/0/images/homepage/' +bgpic+') no-repeat bottom right;">\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;left:-50px;top:-18px"></span>\n')
    document.write('<span style="position:absolute;left:-50px;top:-5px;font-size:1px;width:100px;height:10px;"><span id=LB1'+this.slideshowid+' style="position:absolute;left:0;top:0;font-size:1px;width:0;height:10px;"></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="position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px;overflow:hidden;"><div id="'+this.canvasbase+'_0" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;'+filtering+'opacity:10;background-color:'+fadebgcolor+'"></div><img id="temp'+this.slideshowid+'" style="position:relative;z-index:1000;" src="'+this.theimages[0][0]+'"><div id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;'+filtering+'opacity:10;background-color:'+fadebgcolor+'"></div></div></div></div>')
    }
    else
    document.write('<div><img name="defaultslide'+this.slideshowid+'" src="'+this.postimages[0].src+'"></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) //time between each loop of the images - aprox 15 secs
    obj.delay=obj.delayf
    }
    }
     
    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">'
    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){this.readyFlag=1;setTimeout("document.getElementById('LB0"+this.slideshowid+"').style.display='none';document.getElementById('show"+this.slideshowid+"').style.visibility='visible';if(["+this.slideshowid+"+1]==fadearray.length)startAll()",300);}
    else setTimeout("fadearray["+this.slideshowid+"].images_loading_bar()", 64);
    }
    
    function startAll(){
    var ready=0
    for (var i_tem = 0; i_tem < fadearray.length; i_tem++)
    ready+=fadearray[i_tem].readyFlag? 1 : 0;
    if (ready==fadearray.length)
    for (i_tem = 0; i_tem < fadearray.length; i_tem++){
    if (stagger){
    setTimeout("fadearray["+i_tem+"].startit()", stagger*i_tem)
    setTimeout("document.getElementById('temp"+i_tem+"').style.display='none'", 1000+stagger*i_tem)
    }
    else {
    fadearray[i_tem].startit()
    setTimeout("document.getElementById('temp"+i_tem+"').style.display='none'", 1000)
    }
    }
    else
    setTimeout("startAll()",300)
    }

  3. #3
    Join Date
    Nov 2009
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    in the html:

    Code:
    <tr>
                <td><script type="text/javascript"> 
    var stagger=9000
    new fadeshow(fadeimages3, 218, 127, 0, 4000, 0, 1, "3children-StMary.jpg") </script></td>
                <td width="3%"> </td>
                <td><script type="text/javascript"> 
    var stagger=3000 
    new fadeshow(fadeimages2, 218, 127, 0, 4000, 0, 2, "consultants-meeting.jpg") </script></td>
                <td width="3%"> </td>
                <td><script type="text/javascript"> 
    var stagger=1500
    new fadeshow(fadeimages, 218, 127, 0, 4000, 0, 3, "gansu-project.jpg") </script></td>
            </tr>
            <tr>

  4. #4
    Join Date
    Aug 2004
    Posts
    10,140
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    Hmm I'm not too clear what you're trying to do as far as "stagger" the 3 slideshows. In v2.0 of the script both the fade duration and pause between image changes can be customized for each instance of the slideshow, just like in the older version.
    DD Admin

  5. #5
    Join Date
    Nov 2009
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    By stagger i mean i want image 1 to start then after a bit image 2 to start, then 3, i.e. sequentially. And then i want this to carry on so the images dont change at the same time. I couldnt work out how to do this with v2 and then i came accross v1.5 which has a stagger var.

    The problem seems to still be there with v2 anyway. If you look on the v2 page: http://www.dynamicdrive.com/dynamici...nslideshow.htm
    and right click (wait a few secs then click off menu) in IE8 the images will 'pause' and then continue once you click off the right click menu, but now the images change in tandom rather than sequentially.

    I hope that clarifys the problem..

    thanks

  6. #6
    Join Date
    Nov 2009
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Ok testing V2 again and it seems the right click doesnt effect it as bad, the timings seem to go back to normal.

    However how do i achieve a stagger effect? I need 3 images changing at the same rate but starting at different times...

    Thanks

  7. #7
    Join Date
    Aug 2004
    Posts
    10,140
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    Ok if I understood correctly, you want to be able to add a different initial pause to each slideshow instance on the page, so the first slideshow starts rotating say 2 seconds after the page has loaded, the 2nd 5 seconds etc. If so, try using the modified .js file attached below. Then to specify a custom delay before a particular slideshow starts, inside its initialization code, define the "stagger" option:

    Code:
    var mygallery2=new fadeSlideShow({
    	wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
    	dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
    	imagearray: [
    		["http://i26.tinypic.com/11l7ls0.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
    		["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
    		["http://i30.tinypic.com/531q3n.jpg"],
    		["http://i31.tinypic.com/119w28m.jpg", "", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!
    	],
    	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: "always",
    	stagger: 4000,
    	togglerid: "fadeshow2toggler"
    })
    The above will cause the slideshow to start rotating 4 seconds after the page has loaded.
    DD Admin

  8. #8
    Join Date
    Nov 2009
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Excellent! Thanks for your help.

    However im still getting the same problem in IE8, where by if you right click it will stop the images changing (whilst the right click menu is up) and if you leave it long enough the stagger is lost and the images start changing at the same time again.

    Thanks

    Matt

  9. #9
    Join Date
    Aug 2004
    Posts
    10,140
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    You can try disabling the feature of pausing the slideshow when the mouse hovers over it. Inside the .js file, find the following line:

    Code:
    setting.$wrapperdiv.bind('mouseenter', function(){setting.ismouseover=true}) //pause slideshow mouseover
    and change true above to false.
    DD Admin

  10. #10
    Join Date
    Nov 2009
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    i've already got that commented out

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
  •