PDA

View Full Version : Regarding



yotne145
07-05-2012, 03:45 AM
http://www.dynamicdrive.com/forums/archive/index.php/t-9148.html
Thank you very much "jscheuer1"


I used the file above to use as my image gallery and it works fine in Firefox but not in > then IE 9.
In IE 9 the images jump in transition: This is an image gallery that simply gets a onmouseclick to start the display of each image and ends with the firstone displaying again and stops

I put it into dreamweaver and it throws an error in the javascript function:

function fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay){
var tempimage=theimages[0]

I suspected borderwidth but could not resolve it...can anyone point me in the right direction
thanks
stephen

jscheuer1
07-05-2012, 04:19 AM
Nothing to do with that. IE 9 is capable of and does better with css style opacity for fade transitions. This is as opposed to using the IE proprietary alpha filter.

I've done an update to the code to make sure it does so (uses style opacity):


<!DOCTYPE html>
<html>
<head>
<title>Click to Start, Cycle Once Fade-In Slideshow</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style type="text/css">
.centerdiv{ /*IE method of centering a relative div*/
text-align: center;
}

.centerdiv>div{ /*Proper way to center a relative div*/
margin: 0 auto;
}
</style>

<script type="text/javascript">
/***********************************************
* Click to Start, Cycle Once Fade-In Slideshow based on:
* 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 the original script and 100s more.
* Modified here by jscheuer1 in http://www.dynamicdrive.com/forums
* 7/5/12 - update to select opacity 1st for IE 9+
***********************************************/

var fadeimages=new Array() //Remove or add more sets as needed.
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]=["photo1.jpg"]
fadeimages[1]=["photo2.jpg"]
fadeimages[2]=["photo3.jpg"]
fadeimages[3]=["photo4.jpg"]
fadeimages[4]=["photo5.jpg"]
fadeimages[5]=["photo6.jpg"]
fadeimages[6]=["photo7.jpg"]

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){
var tempimage=theimages[0]
for (var i_tem = 0; i_tem < theimages.length-1; i_tem++)
theimages[i_tem]=theimages[i_tem+1]
theimages[theimages.length-1]=tempimage
this.flag=1
this.mouseclickcheck=0
this.delay=delay
this.degree=10 //initial opacity degree (10%)
this.curimageindex=theimages.length-1
this.nextimageindex=0
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=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;background-color:'+fadebgcolor+'"><img style="cursor:pointer;" title="Click to Start" src="'+this.postimages[this.postimages.length-1].src+'" border="'+this.imageborder+'px"></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=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;background-color:'+fadebgcolor+'"><img style="cursor:pointer;" title="Click to Start" src="'+this.postimages[this.postimages.length-1].src+'" border="'+this.imageborder+'px"></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+=10
if (obj.tempobj.style.opacity&&typeof addEventListener !== 'undefined')
obj.tempobj.style.opacity=obj.degree/101
else 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{
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)
if(obj.flag){
obj.mouseclickcheck=1
obj.flag=0
}
if(obj.nextimageindex==obj.postimages.length-1)
obj.flag=1
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 (picindex==this.theimages.length-1)
slideHTML+='<img style="cursor:pointer;" title="Click to Start" src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px">'
else
slideHTML+='<img title="" src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px">'
picobj.innerHTML=slideHTML
}


fadeshow.prototype.rotateimage=function(){
var cacheobj=this
if (this.mouseclickcheck==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.style.opacity&&typeof addEventListener !== 'undefined')
crossobj.style.opacity=this.degree/101
else 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=this.degree/101
}


fadeshow.prototype.startit=function(){
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
this.populateslide(crossobj, this.curimageindex)
var cacheobj=this
var crossobjcontainer=iebrowser? iebrowser["master"+this.slideshowid] : document.getElementById("master"+this.slideshowid)
crossobjcontainer.onclick=function(){cacheobj.mouseclickcheck=0}
this.rotateimage()
}

</script>
</head>
<body>
<div class="centerdiv">
<script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay)
new fadeshow(fadeimages, 140, 225, 0, 3000)
</script>
</div>
</body>
</html>

yotne145
07-05-2012, 08:09 PM
:D Works Great THANKYOU!!! John
stephen