Advanced Search

Results 1 to 8 of 8

Thread: Ultimate Fade-In Slideshow (v1.51):

  1. #1
    Join Date
    Apr 2013
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Ultimate Fade-In Slideshow (v1.51):

    1) Script Title: JavaScript - Ultimate Fade-In Slideshow

    2) Script URL (on DD):

    3) Describe problem:
    We are using the Ultimate Fade-In Slideshow version 1.51 on our legacy site. I am aware there is a new version out. I am a bit hesitant to update to the new version as we will be moving away from the current website. However, I would like to know how to increase the speed of images on version 1.51. I can provide the code if you need me to. Thanks
    I would like to know how to speed up the slides or images. If you c

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,886
    Thanks
    16
    Thanked 288 Times in 287 Posts
    Blog Entries
    4

    Default

    Please provide a link to your page and a link to the script demo page on DD (so we can read the changelog)
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  3. The Following User Says Thank You to Beverleyh For This Useful Post:

    Tech (04-03-2013)

  4. #3
    Join Date
    Apr 2013
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Ultimate Fade-In Slideshow v1.51

    Quote Originally Posted by Beverleyh View Post
    Please provide a link to your page and a link to the script demo page on DD (so we can read the changelog)

    As I mentioned before. I just want to speed up the rotation of images. Thanks

    Code:
    // JavaScript Document<script type="text/javascript">
    /***********************************************
    * 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]=["01.jpg"," "] 
    fadeimages[1]=["02.jpg"," "] 
    fadeimages[2]=["03.jpg"," "] 
    fadeimages[3]=["04.jpg", ""] 
    
    var fadebgcolor="333333"
    
    ////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+'" style="Z-INDEX:1"></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()
    }
     
    </script>
    Last edited by jscheuer1; 04-03-2013 at 07:25 PM. Reason: Tech: added code tags, I moved all the code inside them

  5. #4
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,886
    Thanks
    16
    Thanked 288 Times in 287 Posts
    Blog Entries
    4

    Default

    Hhhmmm, yes - that's a very old script. You'll probably be better off using something more up to date - the current version is smoother, more robust and allows for easier manipulation of the display speed: http://www.dynamicdrive.com/dynamici...nslideshow.htm

    You say you're aware of this new version so why not upgrade? Is there something on the page - orher than an old design/markup - that is preventing the upgrade?
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  6. #5
    Join Date
    Apr 2013
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    I am trying to avoid taking too much time to set the scrip up. I thought changing a value or two would be much easier than trying to update the script.

  7. #6
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,886
    Thanks
    16
    Thanked 288 Times in 287 Posts
    Blog Entries
    4

    Default

    That's understandable. Can you provide a link to you page though - its an old script without documentation but I believe there should be an additional script call that you haven't posted.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  8. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,704
    Thanks
    43
    Thanked 3,133 Times in 3,097 Posts
    Blog Entries
    12

    Default

    Beverleyh is right, there's an on page call in the body where the slideshow shows up, something like:

    Code:
    <script type="text/javascript">
    //new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
    new fadeshow(fadeimages, 842, 238, 0, 3000, 1, "R") 
    </script>
    It's the delay, in the above example represented by the red 3000, which sets the number of milliseconds between images 3000 = 3 seconds. In your version of that, set it to 2000 for 2 seconds, or whatever you want
    Last edited by jscheuer1; 04-03-2013 at 07:37 PM. Reason: spelling
    - John
    ________________________

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

  9. #8
    Join Date
    Apr 2013
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Smile

    Quote Originally Posted by jscheuer1 View Post
    Beverleyh is right, there's an on page call in the body where the slideshow shows up, something like:

    Code:
    <script type="text/javascript">
    //new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
    new fadeshow(fadeimages, 842, 238, 0, 3000, 1, "R") 
    </script>
    It's the delay, in the above example represented by the red 3000, which sets the number of milliseconds between images 3000 = 3 seconds. In your version of that, set it to 2000 for 2 seconds, or whatever you want
    Thanks to both of you. I finally managed to find the .js file that I needed to in order to make adjustments.

Similar Threads

  1. Ultimate Fade-in Slideshow -- Fade Duration and Pause
    By ellenjones6 in forum Dynamic Drive scripts help
    Replies: 6
    Last Post: 02-21-2014, 04:18 PM
  2. Ultimate Fade-in slideshow (v2.4) - fade description text
    By kwakker35 in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 02-06-2012, 03:13 PM
  3. Ultimate Fade-in slideshow - STOP FADE IN ON FIRST IMAGE
    By trillodigital in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 01-10-2011, 12:18 PM
  4. Replies: 3
    Last Post: 07-12-2010, 04:04 PM
  5. Ultimate Fade in Slideshow - how to require FIRST image to fade in?
    By charmedworks in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 06-17-2008, 07:12 PM

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
  •