Results 1 to 3 of 3

Thread: "ultimate fade in slideshow" question

  1. #1
    Join Date
    Oct 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default "ultimate fade in slideshow" question

    Hi all,

    Well, this is my first post so we go. I put the "ultimate fade in slideshow" 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!

    Code:
    /***********************************************
    * 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()
    }

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,957
    Thanks
    43
    Thanked 3,195 Times in 3,157 Posts
    Blog Entries
    12

    Default

    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).
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Oct 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Talking

    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.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •