coffeecreep2000
10-16-2009, 10:18 PM
Hi all,
Well, this is my first post so we go. I put the "ultimate fade in slideshow (http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm)" code my website (my job's website, actually) to display sponsor banners and it worked fine till someone submitted an animated gif. Here's the thing, the code plays the gif but it calls it up while in random stages of animation. So in the time lapse of display it can start off in the middle of the animation and end at another segment instead of the designated start to finish. So I just want to check and see if there is a way to somehow cue the animation to start form it's beginning when the script calls upon that image in the array. Hope that makes some sense. Here is the code to help out as well. Thanks for reading!
/***********************************************
* Ultimate Fade-In Slideshow (v1.51): © Dynamic Drive (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]=["/images/banners/Falmat.jpg", "http://www.falmat.com", "_new"] //image with link and target syntax
fadeimages[1]=["/images/banners/ITC.jpg", "http://www.itc-transducers.com", "_new"] //image with link and target syntax
fadeimages[2]=["/images/banners/LinkQuest_1129.jpg", "http://www.link-quest.com", "_new"] //image with link and target syntax
fadeimages[3]=["/images/banners/MontereyCanyon.jpg", "http://www.shanarae.com", "_new"] //image with link and target syntax
fadeimages[4]=["/images/banners/OceanSensorSys.jpg", "http://www.oceansensorsystems.com", "_new"] //image with link and target syntax
fadeimages[5]=["/images/banners/OceanTechSys.jpg", "http://www.oceantechnologysystems.com", "_new"] //image with link and target syntax
fadeimages[6]=["/images/banners/Ohmsett-Banner.gif", "http://www.ohmsett.com", "_new"] //image with link and target syntax
fadeimages[7]=["/images/banners/PNI.gif", "http://www.pnicorp.com", "_new"] //image with link and target syntax
fadeimages[8]=["/images/banners/DeepseaPower.jpg", "http://www.deepsea.com", "_new"]//image with link and target syntax
fadeimages[9]=["/images/banners/RBR-Banner.jpg", "http://www.rbr-global.com", "_new"] //image with link and target syntax
fadeimages[10]=["/images/banners/SeaconBanner.jpg", "http://www.seacon-usa.com", "_new"] //image with link and target syntax
fadeimages[11]=["/images/banners/SouthBayCable.jpg", "http://www.southbaycable.com", "_new"] //image with link and target syntax
fadeimages[12]=["/images/banners/TeledyneRDI.jpg", "http://www.rdinstruments.com/nav_main.html", "_new"] //image with link and target syntax
fadeimages[13]=["/images/banners/ST-BannerBG09.jpg", "https://www.sea-technology.com/form_orderbg.html", "_self"] //image with link and target syntax
fadeimages[14]=["/images/banners/ST-BannerWashLet.jpg", "https://www.sea-technology.com/form_subscribe_wlo.html", "_self"] //image with link and target syntax
fadeimages[15]=["/images/banners/ST-BannerSample.jpg", "http://www.sea-technology.com/ad_options.html", "_self"] //image with link and target syntax
fadeimages[16]=["/images/banners/lifelinebanner.jpg", "http://www.sea-technology.com/ad_options.html", "_self"] //image with link and target syntax
fadeimages[17]=["/images/banners/Sonatech_2009.jpg", "http://www.sonatech.com", "_new"] //image with link and target syntax
fadeimages[18]=["/images/banners/AXYSrotate.jpg", "http://www.axystechnologies.com", "_new"] //image with link and target syntax
fadeimages[19]=["/images/banners/Channelindustries.jpg", "http://www.channelindustries.com", "_new"] //image with link and target syntax
fadeimages[20]=["/images/banners/hydracon.jpg", "http://www.hydracon.com/", "_new"] //image with link and target syntax
fadeimages[21]=["/images/banners/turner-Designs-Banner.gif", "http://www.turnerdesigns.com", "_new"] //image with link and target syntax
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, pause, displayorder){
this.pausecheck=pause
this.mouseovercheck=0
this.delay=delay
this.degree=10 //initial opacity degree (10%)
this.curimageindex=0
this.nextimageindex=1
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=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></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=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></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.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 if (obj.tempobj.style.KhtmlOpacity)
obj.tempobj.style.KhtmlOpacity=obj.degree/100
else if (obj.tempobj.style.opacity&&!obj.tempobj.filters)
obj.tempobj.style.opacity=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)
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 (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML='<a href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'">'
slideHTML+='<img src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px">'
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML+='</a>'
picobj.innerHTML=slideHTML
}
fadeshow.prototype.rotateimage=function(){
if (this.pausecheck==1) //if pause onMouseover enabled, cache object
var cacheobj=this
if (this.mouseovercheck==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.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/100
else if (crossobj.style.opacity&&!crossobj.filters)
crossobj.style.opacity=this.degree/101
}
fadeshow.prototype.startit=function(){
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
this.populateslide(crossobj, this.curimageindex)
if (this.pausecheck==1){ //IF SLIDESHOW SHOULD PAUSE ONMOUSEOVER
var cacheobj=this
var crossobjcontainer=iebrowser? iebrowser["master"+this.slideshowid] : document.getElementById("master"+this.slideshowid)
crossobjcontainer.onmouseover=function(){cacheobj.mouseovercheck=1}
crossobjcontainer.onmouseout=function(){cacheobj.mouseovercheck=0}
}
this.rotateimage()
}
Well, this is my first post so we go. I put the "ultimate fade in slideshow (http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm)" code my website (my job's website, actually) to display sponsor banners and it worked fine till someone submitted an animated gif. Here's the thing, the code plays the gif but it calls it up while in random stages of animation. So in the time lapse of display it can start off in the middle of the animation and end at another segment instead of the designated start to finish. So I just want to check and see if there is a way to somehow cue the animation to start form it's beginning when the script calls upon that image in the array. Hope that makes some sense. Here is the code to help out as well. Thanks for reading!
/***********************************************
* Ultimate Fade-In Slideshow (v1.51): © Dynamic Drive (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]=["/images/banners/Falmat.jpg", "http://www.falmat.com", "_new"] //image with link and target syntax
fadeimages[1]=["/images/banners/ITC.jpg", "http://www.itc-transducers.com", "_new"] //image with link and target syntax
fadeimages[2]=["/images/banners/LinkQuest_1129.jpg", "http://www.link-quest.com", "_new"] //image with link and target syntax
fadeimages[3]=["/images/banners/MontereyCanyon.jpg", "http://www.shanarae.com", "_new"] //image with link and target syntax
fadeimages[4]=["/images/banners/OceanSensorSys.jpg", "http://www.oceansensorsystems.com", "_new"] //image with link and target syntax
fadeimages[5]=["/images/banners/OceanTechSys.jpg", "http://www.oceantechnologysystems.com", "_new"] //image with link and target syntax
fadeimages[6]=["/images/banners/Ohmsett-Banner.gif", "http://www.ohmsett.com", "_new"] //image with link and target syntax
fadeimages[7]=["/images/banners/PNI.gif", "http://www.pnicorp.com", "_new"] //image with link and target syntax
fadeimages[8]=["/images/banners/DeepseaPower.jpg", "http://www.deepsea.com", "_new"]//image with link and target syntax
fadeimages[9]=["/images/banners/RBR-Banner.jpg", "http://www.rbr-global.com", "_new"] //image with link and target syntax
fadeimages[10]=["/images/banners/SeaconBanner.jpg", "http://www.seacon-usa.com", "_new"] //image with link and target syntax
fadeimages[11]=["/images/banners/SouthBayCable.jpg", "http://www.southbaycable.com", "_new"] //image with link and target syntax
fadeimages[12]=["/images/banners/TeledyneRDI.jpg", "http://www.rdinstruments.com/nav_main.html", "_new"] //image with link and target syntax
fadeimages[13]=["/images/banners/ST-BannerBG09.jpg", "https://www.sea-technology.com/form_orderbg.html", "_self"] //image with link and target syntax
fadeimages[14]=["/images/banners/ST-BannerWashLet.jpg", "https://www.sea-technology.com/form_subscribe_wlo.html", "_self"] //image with link and target syntax
fadeimages[15]=["/images/banners/ST-BannerSample.jpg", "http://www.sea-technology.com/ad_options.html", "_self"] //image with link and target syntax
fadeimages[16]=["/images/banners/lifelinebanner.jpg", "http://www.sea-technology.com/ad_options.html", "_self"] //image with link and target syntax
fadeimages[17]=["/images/banners/Sonatech_2009.jpg", "http://www.sonatech.com", "_new"] //image with link and target syntax
fadeimages[18]=["/images/banners/AXYSrotate.jpg", "http://www.axystechnologies.com", "_new"] //image with link and target syntax
fadeimages[19]=["/images/banners/Channelindustries.jpg", "http://www.channelindustries.com", "_new"] //image with link and target syntax
fadeimages[20]=["/images/banners/hydracon.jpg", "http://www.hydracon.com/", "_new"] //image with link and target syntax
fadeimages[21]=["/images/banners/turner-Designs-Banner.gif", "http://www.turnerdesigns.com", "_new"] //image with link and target syntax
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, pause, displayorder){
this.pausecheck=pause
this.mouseovercheck=0
this.delay=delay
this.degree=10 //initial opacity degree (10%)
this.curimageindex=0
this.nextimageindex=1
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=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></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=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></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.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 if (obj.tempobj.style.KhtmlOpacity)
obj.tempobj.style.KhtmlOpacity=obj.degree/100
else if (obj.tempobj.style.opacity&&!obj.tempobj.filters)
obj.tempobj.style.opacity=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)
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 (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML='<a href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'">'
slideHTML+='<img src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px">'
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML+='</a>'
picobj.innerHTML=slideHTML
}
fadeshow.prototype.rotateimage=function(){
if (this.pausecheck==1) //if pause onMouseover enabled, cache object
var cacheobj=this
if (this.mouseovercheck==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.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/100
else if (crossobj.style.opacity&&!crossobj.filters)
crossobj.style.opacity=this.degree/101
}
fadeshow.prototype.startit=function(){
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
this.populateslide(crossobj, this.curimageindex)
if (this.pausecheck==1){ //IF SLIDESHOW SHOULD PAUSE ONMOUSEOVER
var cacheobj=this
var crossobjcontainer=iebrowser? iebrowser["master"+this.slideshowid] : document.getElementById("master"+this.slideshowid)
crossobjcontainer.onmouseover=function(){cacheobj.mouseovercheck=1}
crossobjcontainer.onmouseout=function(){cacheobj.mouseovercheck=0}
}
this.rotateimage()
}