Results 1 to 7 of 7

Thread: Ultimate Fade-in slideshow Problem

  1. #1
    Join Date
    Oct 2008
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Ultimate Fade-in slideshow Problem

    1) Script Title: Ultimate Fade-in slideshow (v1.51)

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

    3) Describe problem: Hi there, I tried installing the script for Ultimate Fade-in Slideshow and had to insert two separate JavaScript's into the one page. Reason is that we want one rotating image at the top of the page and the other at the bottom of the page.

    Eg:

    <script type="text/javascript">
    new fadeshow(fadeimages, 600, 400, 0, 7000, 0)
    </script>

    <script type="text/javascript">
    new fadeshow(fadeimages2, 600, 400, 0, 7000, 0)
    </script>

    When we load the page, the 1st slideshow works but the 2nd one dosent and is just grey..

    Can anyone help?

  2. #2
    Join Date
    Dec 2008
    Posts
    53
    Thanks
    20
    Thanked 0 Times in 0 Posts

    Default

    It works OK on our site, check out the code.

    http://www.hillamhotdogs.co.uk/Flyba...lyballFolk.htm

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

    Default

    This may sound a stupid question but have you made sure the 2nd image array in the js file where the arrays are links to the correct location for the image source?

  4. #4
    Join Date
    Oct 2008
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi there, not sure exactly what you meant.

    This is the script which I have on one page. Every time I refresh the screen it comes up with any image in no order.

    Seems like that the slideshow is working fine but when we add the second javascript file it goes all out of order.

    Code:
    <script type="text/javascript">
     
    var fadeimages=new Array()
    //SET IMAGE PATHS. Extend or contract array as needed
    
    fadeimages[0]=["images/1.jpg","#", ""]
    fadeimages[1]=["images/2.jpg","#", ""]
    fadeimages[2]=["images/3.jpg","#", ""]
    fadeimages[3]=["images/4.jpg","#", ""]
    fadeimages[4]=["images/5.jpg","#", ""]
    
    var fadeimages2=new Array() //2nd array set example. Remove or add more sets as needed.
    //SET IMAGE PATHS. Extend or contract array as needed
    
    fadeimages2[0]=["images/1111.jpg","#", ""]
    fadeimages2[1]=["images/2222.jpg","#", ""]
    fadeimages2[2]=["images/3333.jpg","#", ""]
    fadeimages2[3]=["images/4444.jpg","#", ""]
    fadeimages2[4]=["images/5555.jpg","#", ""]
    
    var fadebgcolor="black"
    
    ////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)
    this.postimages=new Array() //preload images
    for (p=0;p<theimages.length;p++){
    this.postimages[p]=new Image()
    this.postimages[p].src=theimages[p][0]
    }
     
    var fadewidth=fadewidth+this.imageborder*2
    var fadeheight=fadeheight+this.imageborder*2
     
    if (iebrowser&&dom||dom) //if IE5+ or modern browsers (ie: Firefox)
    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;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div><div id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></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.startit()
    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">'
    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()
    }
    </script>
    When I just have one of these, it works fine. But when I add the 2nd one, it dosent appear in order.

    Code:
    <script type="text/javascript">
    new fadeshow(fadeimages2, 556, 27, 0, 2500, 0)
    </script>
    Code:
    <script type="text/javascript">
    new fadeshow(fadeimages, 640, 400, 0, 6000, 1, "R")
    </script>

  5. #5
    Join Date
    Oct 2008
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Also the reason for having two separate sections for the JavaScript files is that one is at the top of the page and the other at the bottom of the page.

    This is the only difference I can see between our file and the one downloaded from this site.

  6. #6
    Join Date
    Dec 2008
    Posts
    53
    Thanks
    20
    Thanked 0 Times in 0 Posts

    Default

    You have random selection turned on delete "R".

  7. #7
    Join Date
    Oct 2008
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by BorderTerroir View Post
    You have random selection turned on delete "R".
    Someone feels like an idiot.

    Thanks heaps BorderTerroir.

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
  •