PDA

View Full Version : Fade-In Image Script - Problems with IE6



osuzoo
07-01-2005, 07:07 PM
Script: Fade-In Image Slideshow
http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

The Script works flawlessy in firefox, but upon trying to load the page in IE, the following dialog box pops up:

"A script on this page is causing Internet Explorer to run slowly. If it continues to run, your computer may become unresponsive. Do you want to abort the script?"

Choosing to not abort the script does nothing, and aborting loads the rest of the page, but leaves the image slideshow a black box.

Link to page: http://drupal.science.oregonstate.edu

Thanks for the help.

joshrodgers
07-01-2005, 07:14 PM
Not sure why you are experiencing a problem. I load http://www.dynamicdrive.com/dynamic...inslideshow.htm using Internet Explorer without a problem, and that has a demo of the script on the site. I did load your link in Internet Explorer as well and I do get the error. Its not the script or I would have gotten the error both times. Maybe you didn't copy somthing right. How big are your images? You didn't just specify a width and a height did you? If so, that may be why. Also, how many images does it cycle through. If its about 3 million that could cause problems as well.

osuzoo
07-01-2005, 07:23 PM
There's 12 images in the rotation, and none of them are over 100k.

joshrodgers
07-01-2005, 07:46 PM
Replace what you have with this. I tryed it in Internet Explorer and it worked just fine.


<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='700px' //SET IMAGE WIDTH
var slideshow_height='350px' //SET IMAGE HEIGHT
var pause=9000 //SET PAUSE BETWEEN SLIDE (3000=3 seconds)

var fadeimages=new Array()
//SET 1) IMAGE PATHS, 2) optional link, 3), optional link target:
fadeimages[0]=["images/thumbs/thumb_1be1190e6ea9c224241e5d4d099f1522-46.jpg", "", ""] //plain image syntax
fadeimages[1]=["images/thumbs/thumb_04358041fd8beb8f60fd061e3642389e-37.jpg", "", ""] //plain image syntax
fadeimages[2]=["images/thumbs/thumb_f9e8c3b87b3763bd79810d680f22e23b-38.jpg", "", ""] //plain image syntax
fadeimages[3]=["images/thumbs/thumb_8bb3fa0913897afcb8a9ff7b12dfe85e-39.jpg", "", ""] //plain image syntax
fadeimages[4]=["images/thumbs/thumb_ff7d3eee2cb219a3ed8fbe4200979bda-60.jpg", "", ""] //plain image syntax
fadeimages[5]=["images/thumbs/thumb_25323691aee2cf2a647c1f9e63bbd7dd-33.jpg", "", ""] //plain image syntax
fadeimages[6]=["images/thumbs/thumb_efc30813d020595f4db15203f7e8e023-34.jpg", "", ""] //plain image syntax
fadeimages[7]=["images/thumbs/thumb_48202b8479e3413ac253c0e82d8696c6-41.jpg", "", ""] //plain image syntax
fadeimages[8]=["images/thumbs/thumb_473c5c1b61bea00a76b20de7867838b4-42.jpg", "", ""] //plain image syntax
fadeimages[9]=["images/thumbs/thumb_1869005fb5f15889b85959745ece32bd-45.jpg", "", ""] //plain image syntax
fadeimages[10]=["images/thumbs/thumb_d0d380a7d63904048565e9d634bb429e-44.jpg", "", ""] //plain image syntax
fadeimages[11]=["images/thumbs/thumb_f1c4ae002aa9e04a8cb41dadab71bd2e-47.jpg", "", ""] //plain image syntax

////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][0]
}

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;visibility: hidden"></div></div>')
else
document.write('<img name="defaultslide" src="'+fadeimages[0][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=insertimage(nextimageindex)
nextimageindex=(nextimageindex<fadeimages.length-1)? nextimageindex+1 : 0
var tempobj2=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
tempobj2.style.visibility="hidden"
setTimeout("rotateimage()",pause)
}
}

function insertimage(i){
var tempcontainer=fadeimages[i][1]!=""? '<a href="'+fadeimages[i][1]+'" target="'+fadeimages[i][2]+'">' : ""
tempcontainer+='<img src="'+fadeimages[i][0]+'" border="0">'
tempcontainer=fadeimages[i][1]!=""? tempcontainer+'</a>' : tempcontainer
return tempcontainer
}

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