Results 1 to 2 of 2

Thread: Ultimate Fade-in slideshow -- How to start on command?

  1. #1
    Join Date
    May 2006
    Location
    Georgia, USA
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Ultimate Fade-in slideshow -- How to start on command?

    Ultimate Fade-in slideshow (v1.5)
    http://www.dynamicdrive.com/dynamici...nslideshow.htm

    How can I make the Ultimate Fade-in slideshow (v1.5) start on command as a function?

    EXAMPLE:
    Code:
    startslides()
    
    function startslides(){
    SLIDESHOW JAVASCRIPT
    }
    I was able to modify the old script a year ago and it worked; however, when I try this with the new script it quits working.

    Also, before you were able to have multiple slideshows on a page, I changed the name of every variable in the old script to avoid conflicts, and had two slideshows. I had one slideshow set to start after a delay:

    Code:
    function startslides2(){
    setTimeout("beginslides2()",1750);
    }
    function beginslides2(){
    SLIDESHOW 2 JAVASCRIPT
    }
    Is any of this even possible now that the script has been rewritten? I know it worked before with the old code but I like the new features with v1.5.

    I am still learning about JavaScript and any help would be appreciated.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,076
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    This version will start the slideshows onclick of the initial image, cycle once then restart if clicked again. I made it up custom for another person posting in these forums. It no longer has the mouse over pause and is not exactly what you asked for but, perhaps you can learn what you need from it:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
    <html>
    <head>
    <title>Click to Start, Cycle Once Fade-In Slideshow</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <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
    ***********************************************/
     
    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 fadeimages2=new Array() //Remove or add more sets as needed.
    //SET IMAGE PATHS. Extend or contract array as needed
    fadeimages2[0]=["photo1.jpg"]
    fadeimages2[1]=["photo2.jpg"]
    fadeimages2[2]=["photo3.jpg"]
    fadeimages2[3]=["photo4.jpg"]
    fadeimages2[4]=["photo5.jpg"]
    fadeimages2[5]=["photo6.jpg"]
    fadeimages2[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.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.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)
    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.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
    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)
    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) 
    new fadeshow(fadeimages2, 140, 225, 0, 3000) 
    </script>
    </div>
    </body>
    </html>
    - John
    ________________________

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

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
  •