Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Mar 2005
    Posts
    39
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Multiple slideshow

    Hi

    Ive found a fading slideshow that Im really happy with as it works in all browsers the problem is that I want 2 slideshows to appear on the page. I have been trying to adapt the script but it still isnt working.
    Any advice would be greatly appreciated.
    thanks

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    </head>

    <body>
    <script language="JavaScript1.2" type="text/javascript">

    /***********************************************
    * Fade-in image slideshow script- ?Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
    ***********************************************/

    var slideshow_width='140px' //SET IMAGE WIDTH
    var slideshow_height='225px' //SET IMAGE HEIGHT
    var pause=3000 //SET PAUSE BETWEEN SLIDE (3000=3 seconds)

    var fadeimages=new Array()
    //SET IMAGE PATHS. Extend or contract array as needed
    fadeimages[0]="photo1.jpg"
    fadeimages[1]="photo2.jpg"
    fadeimages[2]="photo3.jpg"

    ////NO need to edit beyond here/////////////

    var preloadedimages=new Array()
    for (p=0;p<fadeimages.length;p++){
    preloadedimages[p]=new Image()
    preloadedimages[p].src=fadeimages[p]
    }

    var ie4=document.all
    var dom=document.getElementById

    if (ie4||dom)
    document.write('<div style="position:relative;width:'+slideshow_width+';height :'+slideshow_height+';overflow:hidden"><div id="canvas0" style="position:absolute;width:'+slideshow_width+';height :'+slideshow_height+';top:0;left:0;filter:alpha(op acity=10);-moz-opacity:10"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+';height :'+slideshow_height+';top:0;left:0;filter:alpha(op acity=10);-moz-opacity:10;visibility: hidden"></div></div>')
    else
    document.write('<img name="defaultslide" src="'+fadeimages[0]+'">')

    var curpos=10
    var degree=10
    var curcanvas="canvas0"
    var curimageindex=0
    var nextimageindex=1


    function fadepic(){
    if (curpos<100){
    curpos+=10
    if (tempobj.filters)
    tempobj.filters.alpha.opacity=curpos
    else if (tempobj.style.MozOpacity)
    tempobj.style.MozOpacity=curpos/101
    }
    else{
    clearInterval(dropslide)
    nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"
    tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
    tempobj.innerHTML='<img src="'+fadeimages[nextimageindex]+'">'
    nextimageindex=(nextimageindex<fadeimages.length-1)? nextimageindex+1 : 0
    var tempobj2=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
    tempobj2.style.visibility="hidden"
    setTimeout("rotateimage()",pause)
    }
    }

    function rotateimage(){
    if (ie4||dom){
    resetit(curcanvas)
    var crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
    crossobj.style.zIndex++
    tempobj.style.visibility="visible"
    var temp='setInterval("fadepic()",50)'
    dropslide=eval(temp)
    curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"
    }
    else
    document.images.defaultslide.src=fadeimages[curimageindex]
    curimageindex=(curimageindex<fadeimages.length-1)? curimageindex+1 : 0
    }

    function resetit(what){
    curpos=10
    var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)
    if (crossobj.filters)
    crossobj.filters.alpha.opacity=curpos
    else if (crossobj.style.MozOpacity)
    crossobj.style.MozOpacity=curpos/101
    }

    function startit(){
    var crossobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
    crossobj.innerHTML='<img src="'+fadeimages[curimageindex]+'">'
    rotateimage()
    }

    if (ie4||dom)
    window.onload=startit
    else
    setInterval("rotateimage()",pause)

    </script>

    <p align="center"><font face="Arial" size="-2">Free DHTML scripts provided by<br>
    <a href="http://www.dynamicdrive.com">Dynamic Drive</a></font></p>
    </body>
    </html>

  • #2
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Answered here and possibly elsewhere:
    http://www.webdeveloper.com/forum/sh...ad.php?t=60694

  • #3
    Regular Coder
    Join Date
    Mar 2005
    Posts
    195
    Thanks
    0
    Thanked 0 Times in 0 Posts
    there is a good demo slideshow here

    http://www.couloir.org/js_slideshow

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,495
    Thanks
    3
    Thanked 500 Times in 487 Posts
    for info this is what I came up with

    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd"
    >

    <
    html>

    <
    head>
      <
    title></title>
    <
    script language="JavaScript" type="text/javascript">
    <!--

    var 
    ImgPath='http://www.vicsjavascripts.org.uk/StdImages/';
    var 
    ImgAry1=new Array('Zero.gif','One.gif','Two.gif','Three.gif','Four.gif','Five.gif')
    var 
    ImgAry2=new Array('One.gif','Two.gif','Three.gif')

    // preload Images
    var zxcImgAry=ImgAry1+ImgAry2;
    var 
    zxcSRCAry=new Array();

    for (
    zxc0=0;zxc0>zxcImgAry.length;i++){
     
    zxcSRCAry[zxc0]=new Image();
     
    zxcSRCAry[zxc0].src=ImgPath+zxcImgAry[zxc0];
    }

    // Customise Speed
    var zxcSpeed=10;

    // NO NEED to Change
    var zxcCnt=0;
    var 
    zxcInc=0;
    var 
    zxcSSAry=new Array();
    var 
    zxcBrow=navigator.userAgent.toLowerCase();

    function 
    zxcInitSlideShows(zxcid,zxcary){
     
    zxcObj=document.getElementById(zxcid);
     
    zxcSSAry[zxcCnt]=new Array();
     
    zxcSSAry[zxcCnt][0]=zxcid;
     
    zxcSSAry[zxcCnt][1]=zxcary.length-1;
     
    zxcSSAry[zxcCnt][2]=0;
     for (
    zxc0=0;zxc0<zxcary.length;zxc0++){
      
    zxcSSAry[zxcCnt][zxc0+4]=zxcObj.cloneNode(true);
      
    zxcSSAry[zxcCnt][zxc0+4].id=zxcid+zxc0;
      
    zxcObj.parentNode.appendChild(zxcSSAry[zxcCnt][zxc0+4]);
      
    zxcSSAry[zxcCnt][zxc0+4].style.position='absolute';
      
    zxcSSAry[zxcCnt][zxc0+4].src=ImgPath+zxcary[zxc0];
      
    zxcSSAry[zxcCnt][zxc0+4].style.top=zxcTop(zxcObj)+'px';
      
    zxcSSAry[zxcCnt][zxc0+4].style.left=zxcLeft(zxcObj)+'px';
      
    zxcOpacity(zxcSSAry[zxcCnt][zxc0+4],0);
     }
     
    zxcOpacity(zxcSSAry[zxcCnt][4],100);
     
    zxcObj.parentNode.removeChild(zxcObj);
     
    zxcCnt++;
    }

    function 
    zxcOpacity(zxcobj,zxcOp){
     
    zxcSt=zxcobj.style;
     if (
    zxcBrow.indexOf('mozilla')>-1&&zxcBrow.indexOf('msie')==-1){
      
    zxcSt.MozOpacity=zxcOp/100;
     }
     else {
      if (
    document.all){ zxcSt.filter='alpha(opacity='+zxcOp+')'  }
       else { 
    zxcSt.MozOpacity=zxcOp+'%'; }
     }
    }

    function 
    zxcFade(){
     
    zxcInc+=zxcSpeed;
     
    zxcOpacity(zxcB,zxcInc);
     
    zxcOpacity(zxcF,100-zxcInc);
     if (
    zxcInc<100){ zxcTO=setTimeout("zxcFade()",10); }
     else { 
    zxcOpacity(zxcB,100); zxcOpacity(zxcF,0); zxcInc=0; }
    }

    function 
    zxcFindSS(zxcid,zxcdir){
     if (
    zxcInc){ return; }
     for (
    zxc0=0;zxc0<zxcSSAry.length;zxc0++){
      if (
    zxcid==zxcSSAry[zxc0][0]){
       
    zxcSSRotate(zxcSSAry[zxc0],zxcdir)
      }
     }
    }

    function 
    zxcSSRotate(zxcary,zxcdir){
     
    zxcF=zxcary[zxcary[2]+4];
     if (
    zxcdir=='Fwd'){
      
    zxcary[3]=zxcary[2]+1;
      if (
    zxcary[3]>zxcary[1]){ zxcary[3]=0; }
     }
     if (
    zxcdir=='Back'){
      
    zxcary[3]=zxcary[2]-1;
      if (
    zxcary[3]<0){ zxcary[3]=zxcary[1]; }
     }
     
    zxcB=zxcary[zxcary[3]+4];
     
    zxcFade();
     
    zxcary[2]=zxcary[3];
    }

    function 
    zxcLeft(zxc){
     
    zxcObjLeft=zxc.offsetLeft;
     while(
    zxc.offsetParent!=null){
      
    zxcObjParent=zxc.offsetParent;
      
    zxcObjLeft+=zxcObjParent.offsetLeft;
      
    zxc=zxcObjParent;
     }
     return 
    zxcObjLeft;
    }

    function 
    zxcTop(zxc){
     
    zxcObjTop=zxc.offsetTop;
     while(
    zxc.offsetParent!=null){
      
    zxcObjParent=zxc.offsetParent;
      
    zxcObjTop+=zxcObjParent.offsetTop;
      
    zxc=zxcObjParent;
     }
     return 
    zxcObjTop;
    }

    //-->
    </script>

    </head>

    <body onload="zxcInitSlideShows('SS1',ImgAry1);zxcInitSlideShows('SS2',ImgAry2);" >



    <table width="200" border="1" style="text-align:center;">
      <tr>
        <td colspan="2" >Slide Show 1</td>
      </tr>
      <tr height="200">
        <td colspan="2" align="center" valign="middle" >
        <img id="SS1" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="180" height="180">
        </td>
      </tr>
      <tr>
        <td width="50%" onclick="javascript:zxcFindSS('SS1','Fwd');" >Forward</td>
        <td width="50%" onclick="javascript:zxcFindSS('SS1','Back');" >Back</td>
      </tr>
    </table>
    <table width="200" border="1" style="text-align:center;">
      <tr>
        <td colspan="2" >Slide Show 2</td>
      </tr>
      <tr height="200">
        <td colspan="2" align="center" valign="middle" >
        <img id="SS2" src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" width="180" height="180">
        </td>
      </tr>
      <tr>
        <td width="50%" onclick="javascript:zxcFindSS('SS2','Fwd');" >Forward</td>
        <td width="50%" onclick="javascript:zxcFindSS('SS2','Back');">Back</td>
      </tr>
    </table>

    </body>

    </html> 


  •  

    Posting Permissions

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