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

Thread: Fade-in slideshow

  1. #1
    Join Date
    Nov 2004
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Fade-in slideshow

    This script runs great in IE. However, in Mozilla, the fade has a lot of flicker to it. When the image is almost completely transitioned, it flashes a full-brightness image of the slide for a split second. It looks pretty odd. Does anoyone know a way to fix this?

    Also, someone mentioned this earlier but has not received a response, but I am interested as well. Is there a way to control the speed of the fading effect? I would like the transition to happen a little more slowly.

    Otherwise, a great little script. Thanks!

  2. #2
    Join Date
    Aug 2004
    Posts
    9,896
    Thanks
    3
    Thanked 967 Times in 955 Posts
    Blog Entries
    15

    Default

    Warning: Please include a link to the DD script in question in your post. See this thread for the proper posting format for asking a question.

    This is a known issue. Unfortunately the problem seems to be inherant to the browser rather than the script itself. We've tried tinkering with things to get rid of the flicker, though in the end concluded the problem appears to be with the browser itself and how it handles opacity in conjunction with dynamic content.

  3. #3
    Join Date
    Dec 2004
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up Solution for fade-in slideshow flickering!

    I found a simple solution for the flicker problem in Firefox:

    Just change the two lines in the functions fadepic() and resetit() as follows:

    Code:
    crossobj.style.MozOpacity=curpos/101
    (divide by 101 instead of 100)

    That way, the MozOpacity never gets 1 straight, only 0.99 and the flickering is away!!

    Best regards,
    Markus

  4. #4
    Join Date
    Aug 2004
    Posts
    9,896
    Thanks
    3
    Thanked 967 Times in 955 Posts
    Blog Entries
    15

    Default

    Great find 1finger! All this time, it never occured to me that "1" is the cause of the problem in Mozilla.

    Thanks for that.

  5. #5
    Join Date
    Nov 2004
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Awesome!!! Thanks!

  6. #6
    Join Date
    Dec 2004
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Can anyone tell me on this same subject why my picture box is coming up with a white box and a red x in the middle- New to this so sorry if posted in wrong area but it is pertaining to the same code.

    Thans-

  7. #7
    Join Date
    Aug 2004
    Posts
    9,896
    Thanks
    3
    Thanked 967 Times in 955 Posts
    Blog Entries
    15

    Default

    The "x" simply means the browser cannot locate your images. Make sure the path to them is correct inside the script, and that you've actually uploaded the images to that location.

  8. #8
    Join Date
    Dec 2004
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    THank you for the information but I tried entering the locationof the pic (fileCabinet) and it still does not work. I copied the code in the message can you show me where I should reference this... Thanks again for your help! Kristin

    <script language="JavaScript1.2" type="text/javascript">

    /***********************************************
    * Fade-in image slideshow script- Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
    ***********************************************/

    var slideshow_width='140px' //SET IMAGE WIDTH
    var slideshow_height='225px' //SET IMAGE HEIGHT
    var pause=3000 //SET PAUSE BETWEEN SLIDE (3000=3 seconds)

    var fadeimages=new Array()
    //SET IMAGE PATHS. Extend or contract array as needed
    fadeimages[0]="photo1.jpg"
    fadeimages[1]="photo2.jpg"
    fadeimages[2]="photo3.jpg"

    ////NO need to edit beyond here/////////////

    var preloadedimages=new Array()
    for (p=0;p<fadeimages.length;p++){
    preloadedimages[p]=new Image()
    preloadedimages[p].src=fadeimages[p]
    }

    var ie4=document.all
    var dom=document.getElementById

    if (ie4||dom)
    document.write('<div style="position:relative;width:'+slideshow_width+';height:'+slideshow_height+';overflow:hidden"><div id="canvas0" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10"></div></div>')
    else
    document.write('<img name="defaultslide" src="'+fadeimages[0]+'">')

    var curpos=10
    var degree=10
    var curcanvas="canvas0"
    var curimageindex=0
    var nextimageindex=1


    function fadepic(){
    if (curpos<100){
    curpos+=10
    if (tempobj.filters)
    tempobj.filters.alpha.opacity=curpos
    else if (tempobj.style.MozOpacity)
    tempobj.style.MozOpacity=curpos/101
    }
    else{
    clearInterval(dropslide)
    nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"
    tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
    tempobj.innerHTML='<img src="'+fadeimages[nextimageindex]+'">'
    nextimageindex=(nextimageindex<fadeimages.length-1)? nextimageindex+1 : 0
    setTimeout("rotateimage()",pause)
    }
    }

    function rotateimage(){
    if (ie4||dom){
    resetit(curcanvas)
    var crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
    crossobj.style.zIndex++
    var temp='setInterval("fadepic()",50)'
    dropslide=eval(temp)
    curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"
    }
    else
    document.images.defaultslide.src=fadeimages[curimageindex]
    curimageindex=(curimageindex<fadeimages.length-1)? curimageindex+1 : 0
    }

    function resetit(what){
    curpos=10
    var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)
    if (crossobj.filters)
    crossobj.filters.alpha.opacity=curpos
    else if (crossobj.style.MozOpacity)
    crossobj.style.MozOpacity=curpos/101
    }

    function startit(){
    var crossobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
    crossobj.innerHTML='<img src="'+fadeimages[curimageindex]+'">'
    rotateimage()
    }

    if (ie4||dom)
    window.onload=startit
    else
    setInterval("rotateimage()",pause)

    </script>

    <p align="center"><font face="Arial" size="-2">Free DHTML scripts provided by<br>
    <a href="http://www.dynamicdrive.com">Dynamic Drive</a></font></p>

  9. #9
    Join Date
    Aug 2004
    Location
    Brighton
    Posts
    1,563
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Ok, first, check your browser can actually access photo3.jpg, for example.

    cr3ative
    A retired member, drop me a line through my site if you'd like to find me!
    cr3ative media | read the stickies

  10. #10
    Join Date
    Dec 2004
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    No once I copy it into the site I can't get the sample pictures either.

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
  •