Fade-in slideshow

[bmdenver]

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!

[ddadmin]

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.

[1finger]

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

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

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

[ddadmin]

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

Thanks for that.

[bmdenver]

Awesome!!! Thanks!

[ohowfny]

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-

[ddadmin]

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.

[ohowfny]

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>

[cr3ative]

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

cr3ative

[ohowfny]

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