Results 1 to 2 of 2

Thread: Fade In Slideshow v1.51

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

    Question Fade In Slideshow v1.51

    Hi All,

    I tried to modify this script to allow me to specify a div in which to place the Slideshow rather than creation by JavaScript.

    My code changes are included below, although close the transition from image to image seems 'odd' and only seems to work every other swap. Anybody any ideas?

    Thanks
    Andy.

    ----CODE FOLLOWS--- SORY IT'S SO BRIEF CAN'T GET IT TO POST!!!
    function fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay, pause, displayorder, inelement){
    ...

    if (iebrowser&&dom||dom) //if IE5+ or modern browsers (ie: Firefox)
    {
    if (typeof inelement!="undefined")
    {
    FirstDIV=document.createElement('DIV');
    FirstDIV.id='master'+this.slideshowid;
    //FirstDIV.style.position='relative';
    FirstDIV.style.width = fadewidth+'px';
    FirstDIV.style.height = fadeheight+'px';
    FirstDIV.style.overflow = 'hidden';
    InDIV=document.createElement('DIV');
    InDIV.id=this.canvasbase+'_0';
    //InDIV.style.position= 'absolute';
    InDIV.style.width =fadewidth+'px';
    InDIV.style.height = fadeheight+'px';
    InDIV.style.top =0;
    InDIV.style.left =0;
    InDIV.style.backgroundcolor = fadebgcolor;
    InDIV.style.opacity = 0.1;
    InDIV.style.filter = 'alpha(opacity=10)';
    InDIV.style.MozOpacity =0.1;
    InDIV.style.KhtmlOpacity =0.1;
    FirstDIV.appendChild(InDIV);
    In2DIV=document.createElement('DIV');
    In2DIV.id=this.canvasbase+'_1';
    //In2DIV.position = 'absolute';
    In2DIV.width =fadewidth+'px';
    In2DIV.height = fadeheight+'px';
    In2DIV.top =0;
    In2DIV.left =0;
    In2DIV.style.backgroundcolor = fadebgcolor;
    In2DIV.style.opacity = 0.1;
    In2DIV.style.filter = 'Microsoft.alpha(opacity=10)';
    In2DIV.style.MozOpacity =0.1;
    In2DIV.style.KhtmlOpacity =0.1;
    $(FirstDIV).appendChild(In2DIV)
    $(inelement).appendChild(FirstDIV)
    }
    else
    document.write(...std code...)
    }
    else
    {
    if (typeof inelement!="undefined")
    {
    FirstDIV=document.createElement('DIV');
    In = document.createElement('IMG');
    In.name='defaultslide'+this.slideshowid;
    In.src=this.postimages[0].src;
    $(FirstDIV).appendChild(In)
    $(inelement).appendChild(FirstDIV)
    }
    else
    document.write(...std code...);
    }

    ...
    }

    -- MARKUP --
    new fadeshow(fadeimages, 234, 272, 1, 5000, 1, null)
    new fadeshow(fadeimages, 234, 272, 1, 5000, 1, null, 'aohere')

    --ORIGINAL SCRIPT--
    http://www.dynamicdrive.com/dynamici...nslideshow.htm

    You'ss see the first (and std code as given on this site works as expected) yet the modified one has 'issues'! thanks again.

  2. #2
    Join Date
    Aug 2004
    Posts
    9,894
    Thanks
    3
    Thanked 967 Times in 955 Posts
    Blog Entries
    15

    Default

    Why not just put the script inside the desired DIV, so its output is contained within that DIV? Anyhow, to answer your question, try something like the below modified script:

    Code:
    <div id="somelement"> </div>
    
    <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]=["photo1.jpg", "", ""] //plain image syntax
    fadeimages[1]=["photo2.jpg", "http://www.cssdrive.com", ""] //image with link syntax
    fadeimages[2]=["photo3.jpg", "http://www.javascriptkit.com", "_new"] //image with link and target syntax
     
    var fadeimages2=new Array() //2nd array set example. Remove or add more sets as needed.
    //SET IMAGE PATHS. Extend or contract array as needed
    fadeimages2[0]=["photo1.jpg", "", ""] //plain image syntax
    fadeimages2[1]=["photo2.jpg", "http://www.cssdrive.com", ""] //image with link syntax
    fadeimages2[2]=["photo3.jpg", "http://www.javascriptkit.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, inelement){
    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)
    var slideshowHTML='<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
    var slideshowHTML='<div><img name="defaultslide'+this.slideshowid+'" src="'+this.postimages[0].src+'"></div>'
    document.getElementById(inelement).innerHTML=slideshowHTML
     
    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>
    
    <body>
    
    <script type="text/javascript">
    //new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
    new fadeshow(fadeimages2, 140, 225, 0, 3000, 0, "", "somelement")
     
    </script>

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
  •