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

Thread: Problem with Ultimate fade-in slideshow in Firefox

  1. #1
    Join Date
    Oct 2006
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Problem with Ultimate fade-in slideshow in Firefox

    1) Script Title: Ultimate Fade-in slide show

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

    3) Describe problem:
    Hi guys, it works perfectly in IE...but not Firefox 2.0. I cant see it at all and its not taking up any space. Also I get an error in the console saying "theimages" has no propertys". Oh and I have the script externaly.

    js-file:

    /***********************************************
    * Ultimate Fade-In Slideshow (v1.5): © 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.
    ***********************************************/

    var fadebgcolor="white"

    ////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=3 //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);-moz-opacity:10;-khtml-opacity:10;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);-moz-opacity:10;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+=3
    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{
    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=obj.degree/100
    }


    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()
    }
    head:
    <script type="text/javascript">
    <!--
    var fadeimages = new Array();
    fadeimages[0]=['img/photoHome01a.jpg', 'inspiration.php', ''];
    fadeimages[1]=['img/photoHome01b.jpg', 'inspiration.php', ''];
    fadeimages[2]=['img/photoHome01c.jpg', 'inspiration.php', ''];
    -->
    </script>
    <script type="text/javascript" src="js/ultimateSlideshow.js">
    /***********************************************
    * Ultimate Fade-In Slideshow (v1.5): &#169; 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.
    ***********************************************/
    </script>
    body:
    <script type="text/javascript">new fadeshow(fadeimages, 496, 296, 0, 5000, 0);</script>
    Last edited by VII; 10-26-2006 at 05:03 PM.

  2. #2
    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

    This is wrong:

    Code:
    var fadeimages = new Array();
    fadeimages[0]=['img/photoHome01a.jpg', 'inspiration.php', ''];
    fadeimages[1]=['img/photoHome01b.jpg', 'inspiration.php', ''];
    [2]=['img/photoHome01c.jpg', 'inspiration.php', ''];
    You can't just have a '[2]' there and expect a browser to accept that or even to be able to recover from it. It would need to be 'fadeimages[2]'. There could be other problems. Also, FF 2 isn't in release yet - better to test with v1.5.0.7 - the current release. I doubt that it would make much difference with the above error though.
    - John
    ________________________

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

  3. #3
    Join Date
    Oct 2006
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I dont know what happened there, its not like that in the original code, so I edited my post above. About Firefox, 2.0 is what's recomended at www.getfirefox.com.

  4. #4
    Join Date
    Oct 2006
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I solved it. Thanx for the effort. I had a script above where I create the array that wasnt functioning properly in FF.

  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

    Quote Originally Posted by VII
    About Firefox, 2.0 is what's recomended at www.getfirefox.com.
    Odd, however - it still hasn't been released into the update pool. If I check for updates, using my current version, none are available. This could be because it is a full version update but, I think it is more likely that they aren't ready to update the installed base just yet.

    Glad you could fix your problem.
    - John
    ________________________

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

  6. #6
    Join Date
    Oct 2006
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Guys, is it possible to have the slideshow positioned staticly and still keep the fade?

    I noticed that my slideshow wont scroll in IE6 unless its static.

    Im not new to javascript, but I couldt figure out a solution.

  7. #7
    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

    Quote Originally Posted by VII
    Guys, is it possible to have the slideshow positioned staticly and still keep the fade?
    The slide show can (and should) be placed in a statically positioned element (the body will do, if nothing else static is available), it is only its inner containers that use relative and absolute position.

    Your question seems vague, if you are still having problems:

    Please be more specific. And, please post a link to your problem page.
    - John
    ________________________

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

  8. #8
    Join Date
    Oct 2006
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    http://www.phsion.se/jysk/jysk.se/

    View it in 600x800 in IE(6) and you will see the slideshow isnt moving when you scroll.

    In an attempt to solve it I removed the positioning in the script, but then the fade stopped working.

  9. #9
    Join Date
    Oct 2006
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    also, how can I make it not start with a fade? I would want it in 100% opacity from start and the fade when it changes image.

    I feel kinda stupid for asking.

  10. #10
    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

    Whoa! What an involved set of pages and stylesheets! Try removing the red highlighted styles from your:

    http://www.phsion.se/jysk/jysk.se/hitech/css/contentstyle.css

    file:

    Code:
    html{
    	height: 100%; 
    	overflow-y: auto; 
    	margin: 0px;
    	padding: 0px;
    	background-color: #ffffff;
    }
    
    body{
    	height: 100%; 
    	overflow-y: auto; 
    	margin: 0px;
    	padding: 0px;
    	background: #ffffff url(http://www.phsion.se/jysk/jysk.se/hitech/img/backgroundSidebar.gif) repeat-y top left;
    	color: #000000;
    	font-family: Verdana, Arial, sans-serif;
    	font-size: 10px;
    }
    About starting with a solid image, I will have to get back to you on that.
    - 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
  •