PDA

View Full Version : Fade-in slideshow



bmdenver
11-15-2004, 05:34 PM
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
11-16-2004, 04:08 AM
rules

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
12-01-2004, 06:51 AM
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!! :cool:

Best regards,
Markus

ddadmin
12-02-2004, 10:47 PM
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
12-05-2004, 03:08 AM
Awesome!!! Thanks!

ohowfny
12-07-2004, 04:38 PM
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
12-07-2004, 10:23 PM
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
12-07-2004, 10:59 PM
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
12-08-2004, 03:36 PM
Ok, first, check your browser can actually access photo3.jpg, for example.

cr3ative

ohowfny
12-08-2004, 05:04 PM
No once I copy it into the site I can't get the sample pictures either.

cr3ative
12-08-2004, 05:28 PM
That means that the pictures haven't uploaded properly. Once you can access the photos properly, the script will work [provided paths are right.]

cr3ative