PDA

View Full Version : "ultimate fade in slideshow" question



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()
}

jscheuer1
10-17-2009, 10:22 AM
Probably, and it would probably be easier to do so if you used the latest version of the script, as the new version has a feature (currently undocumented) to allow one to create custom code for various events like 'onslide' which fires once each image has become fully visible.

What would be required would be a a static gif image representing the first frame of the animated version. It could be used in place of the animated version, then once it was visible it could be replaced with the animated version, which would then have to start from the beginning.

This animated version should be preloaded as the page loads though, not after, and the code would be a little tricky. So, I'll not bother with it unless you decide to upgrade to the new version of the script.

If you do, provide a link to the page, so I can see it in action and grab the image to make the static version and see what code to write (it will be partly dependent upon the image itself).

coffeecreep2000
10-19-2009, 03:20 PM
Thanks for the response, jscheuer1. I'll get right on that code and try out what you mentioned. I figured there would be a logical way of doing this and this definitely makes sense.