Results 1 to 3 of 3

Thread: Dynamic Carousel Slideshow

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

    Default Dynamic Carousel Slideshow

    U jayakodi

    I have re-worked on the good old Carousel Slideshow code to make it look simpler and added dynamic features to change direction of rotation with the 4 arrow keys, change the speed with + - keys, move the carousel with PgUp / Dn keys and change the size with / * keys; the code is as given below and works well with IE for me.

    Code:
    <html><body></body>
    <script type='text/javascript'>
    pics=['http://www.dynamicdrive.com/dynamicindex14/photo1.jpg',
    'http://www.dynamicdrive.com/dynamicindex14/photo2.jpg',
    'http://www.dynamicdrive.com/dynamicindex14/photo3.jpg',
    'http://www.dynamicdrive.com/dynamicindex14/photo4.jpg']
    
    // or, your list of images:  pics=['c:/1.wmf','c:/2.wmf','c:/3.wmf','c:/4.wmf','c:/5.wmf']
    
    var sides=8,speed=20,pw=100,drn="horiz",counter=0,spn=true,dn=1,mpi=Math.PI
    pn=pics.length;if(sides>2*pn){sides=2*pn}
    
    var px=[],imgx=[],imgy=[],imgw=[],ino,imn,faces,cnv
    
    cnv=document.body.appendChild(document.createElement("div"))
    with(cnv.style){width=pw;height=pw;position="absolute";left=pw;top=pw}
    ino=pn+1;imn=2*pn;faces=Math.ceil(sides/2)
    
    for(var i=0;i<pn;i++){px[i]=cnv.appendChild(document.createElement("image"))
    px[i].src=pics[i];px[i+pn]=px[i];if(pn==faces){px[i+2*pn]=px[i]}
    with (px[i].style){position='absolute';border="solid 1 blue"}}
    
    function stg(){var fo=Math.floor(pw*Math.cos(mpi/sides)/Math.sin(mpi/sides)/2);var tpi=0.2*mpi/sides
    for(i=0;i<=10*faces;i++){imgw[i]=pw*Math.sin(tpi*i)
    imgx[i]=Math.floor(pw+dn*fo*Math.cos(tpi*i)-imgw[i]/2)}}
    
    function rotate(){setTimeout('rotate()',speed);if(!spn){return}
    if(++counter>=10){counter=0;if(++ino>=imn){ino=pn}}
    px[ino-faces].style.left=-5000
    for(var i=0;i<faces;i++){with(px[ino-i].style){if(drn=="vert"){top=imgx[counter+i*10];left=0;width=pw;height=imgw[counter+i*10]}
    else{left=imgx[counter+i*10];top=0;height=pw;width=imgw[counter+i*10]}}}
    cnv.focus()}
    
    cnv.onmouseover=function(){spn=false}
    cnv.onmouseout=function(){spn=true}
    cnv.onkeyup=function(){kk=event.keyCode
    switch(kk){case 40:dn=-1;drn="vert";break
    case 38:dn=1;drn="vert";break
    case 39:dn=-1;drn="horiz";break
    case 37:dn=1;drn="horiz";break
    case 107:speed=speed-10;if(speed<0){speed=0};break
    case 109:speed=speed+10;break
    case 34:cnv.style.left=cnv.offsetLeft+50;cnv.style.top=cnv.offsetTop+50;break
    case 33:cnv.style.left=cnv.offsetLeft-50;cnv.style.top=cnv.offsetTop-50;break
    case 106: pw=pw+20;break
    case 111: pw=pw-20;break}
    stg()}
    
    stg()
    rotate()
    alert("Use arrow keys to change direction\n+ / - to change the speed\nPgUp/PgDn to move carousel\n * or / to change the size.\nmouseOver pauses spinning")
    </script>
    </html>
    Happy coding for all.
    Last edited by Beverleyh; 05-18-2013 at 01:48 PM. Reason: Formatting

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,190 Times in 3,154 Posts
    Blog Entries
    12

    Default

    That code is quirks mode only and IE only. It also exposes tons of global variables, two or more undeclared even. Try this instead:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body>
    </body>
    <script type='text/javascript'>
    (function(){
    var pics=[
    'photo1.jpg',
    'photo2.jpg',
    'photo3.jpg',
    'photo4.jpg'
    ];
    
    // or, your list of images:  pics=['c:/1.wmf','c:/2.wmf','c:/3.wmf','c:/4.wmf','c:/5.wmf']
    
    var sides=8,speed=20,pw=100,drn="horiz",counter=0,spn=true,dn=1,mpi=Math.PI,
    pn=pics.length, px=[],imgx=[],imgy=[],imgw=[],ino,imn,faces,cnv;if(sides>2*pn){sides=2*pn}
    
    cnv=document.body.appendChild(document.createElement("div"))
    with(cnv.style){width=pw+'px';height=pw+'px';position="absolute";left=pw+'px';top=pw+'px'}
    ino=pn+1;imn=2*pn;faces=Math.ceil(sides/2)
    
    for(var i=0;i<pn;i++){px[i]=cnv.appendChild(document.createElement("img"))
    px[i].src=pics[i];px[i+pn]=px[i];if(pn==faces){px[i+2*pn]=px[i]}
    with (px[i].style){position='absolute';border="solid 1px blue"}}
    
    function stg(){var fo=Math.floor(pw*Math.cos(mpi/sides)/Math.sin(mpi/sides)/2);var tpi=0.2*mpi/sides
    for(i=0;i<=10*faces;i++){imgw[i]=pw*Math.sin(tpi*i)
    imgx[i]=Math.floor(pw+dn*fo*Math.cos(tpi*i)-imgw[i]/2)}}
    
    function rotate(){setTimeout(rotate,speed);if(!spn){return}
    if(++counter>=10){counter=0;if(++ino>=imn){ino=pn}}
    px[ino-faces].style.left=-5000+'px'
    for(var i=0;i<faces;i++){with(px[ino-i].style){if(drn=="vert"){top=imgx[counter+i*10]+'px';left=0;width=pw+'px';height=imgw[counter+i*10]+'px'}
    else{left=imgx[counter+i*10]+'px';top=0;height=pw+'px';width=imgw[counter+i*10]+'px'}}}
    cnv.focus()}
    
    cnv.onmouseover=function(){spn=false}
    cnv.onmouseout=function(){spn=true}
    document.onkeydown=function(e){e=e||event;var kk=e.keyCode;
    switch(kk){case 40:dn=-1;drn="vert";break
    case 38:dn=1;drn="vert";break
    case 39:dn=-1;drn="horiz";break
    case 37:dn=1;drn="horiz";break
    case 107:speed=speed-10;if(speed<0){speed=0};break
    case 109:speed=speed+10;break
    case 34:cnv.style.left=cnv.offsetLeft+50+'px';cnv.style.top=cnv.offsetTop+50+'px';break
    case 33:cnv.style.left=cnv.offsetLeft-50+'px';cnv.style.top=cnv.offsetTop-50+'px';break
    case 106: pw=pw+20;break
    case 111: pw=pw-20;break}
    stg()}
    
    stg()
    rotate()
    
    })();
    alert("Use arrow keys to change direction\n+ / - to change the speed\nPgUp/PgDn to move carousel\n * or / to change the size.\nmouseOver pauses spinning")
    </script>
    </html>
    - John
    ________________________

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

  3. #3
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,774
    Thanks
    2
    Thanked 410 Times in 405 Posts

    Default

    for interest

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    </head>
    
    <body>
    <div id="d1" style="position:relative;left:200px;top:200px;width:100px;height:190px;border:solid red 1px" ></div>
    <div id="d2" style="position:relative;left:200px;top:400px;width:100px;height:100px;" ></div>
    
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    var zxcSpinner={
    
     Direction:function(id,d){
      var o=this['zxc'+id];
      if (o){
       o.dir=typeof(d)=='number'?d<0?-1:1:o.dir;
       this.stg(o);
      }
     },
    
     Mode:function(id,m){
      var o=this['zxc'+id];
      o?o.mde=typeof(m)=='string'&&m.charAt(0).toUpperCase()=='V'?'V':'H':null;
     },
    
     Speed:function(id,s){
      var o=this['zxc'+id];
      o?o.spd=Math.max(typeof(s)=='number'?s:50,20):null;
     },
    
     Pause:function(id){
      var o=this['zxc'+id];
      if (o){
       clearTimeout(o.to);
       o.run=false;
      }
     },
    
     Auto:function(id){
      var oop=this,o=this['zxc'+id];
      if (o){
       o.to=setTimeout(function(){ oop.rotate(o); },250);
      }
     },
    
     init:function(o){
      var id=o.ID,m=o.Mode,sides=o.Sides,ary=o.Images,s=o.Speed,d=o.Direction,p=document.getElementById(id),lgth=ary.length,pw=p.offsetWidth,ino=lgth+1,imn=2*lgth,sides=typeof(sides)=='number'?sides:lgth,sides=Math.min(Math.max(sides,2),lgth*2),faces=Math.ceil(sides/2),px=[],o,z0=0;
      for(var z0=0;z0<lgth;z0++){
       px[z0]=p.appendChild(document.createElement("img"))
       px[z0].src=ary[z0];
       px[z0+lgth]=px[z0];
       px[z0].style.position='absolute';
       px[z0].style.border="solid 1px blue"
       if(lgth==faces){
        px[z0+2*lgth]=px[z0]
       }
      }
      this['zxc'+id]=o={
       px:px,
       imgw:[],
       imgx:[],
       faces:faces,
       sides:sides,
       pw:pw,
       lgth:lgth,
       ino:lgth+1,
       imn:2*lgth,
       cnt:0,
       dir:1,
       run:true
      }
      this.Speed(id,s);
      this.Direction(id,d);
      this.Mode(id,m);
      this.addevt(p,'mouseover','Pause',id);
      this.addevt(p,'mouseout','Auto',id);
      this.rotate(o);
     },
    
     stg:function(o){
      var fo=Math.floor(o.pw*Math.cos(Math.PI/o.sides)/Math.sin(Math.PI/o.sides)/2),tpi=0.2*Math.PI/o.sides,z0=0;
      for(;z0<=10*o.faces;z0++){
       o.imgw[z0]=o.pw*Math.sin(tpi*z0);
       o.imgx[z0]=Math.floor(o.pw+o.dir*fo*Math.cos(tpi*z0)-o.imgw[z0]/2);
      }
     },
    
     rotate:function(o){
      if(++o.cnt>=10){
       o.cnt=0;
       if(++o.ino>=o.imn){
        o.ino=o.lgth
       }
      }
      var oop=this,m=o.mde=="V"?['top','left','width','height']:['left','top','height','width'],z0=0;
      o.px[o.ino-o.faces].style[m[0]]='-5000px'
      for(;z0<o.faces;z0++){
       o.px[o.ino-z0].style[m[0]]=o.imgx[o.cnt+z0*10]+'px';
       o.px[o.ino-z0].style[m[1]]='0px';
       o.px[o.ino-z0].style[m[2]]=o.pw+'px';
       o.px[o.ino-z0].style[m[3]]=o.imgw[o.cnt+z0*10]+'px'
      }
      o.to=setTimeout(function(){ oop.rotate(o); },o.spd);
     },
    
     addevt:function(o,t,f,p){
      var oop=this;
      if (o.addEventListener){
       o.addEventListener(t,function(e){ return oop[f](p);}, false);
      }
      else if (o.attachEvent){
       o.attachEvent('on'+t,function(e){ return oop[f](p); });
      }
     }
    
    }
    
    zxcSpinner.init({
     ID:'d1',      // the unique ID name of the parent DIV.                             (string)
     Images:[      // an array of image SRCs.                                           (array)
      'http://www.vicsjavascripts.org.uk/StdImages/1.gif',
      'http://www.vicsjavascripts.org.uk/StdImages/2.gif',
      'http://www.vicsjavascripts.org.uk/StdImages/3.gif',
      'http://www.vicsjavascripts.org.uk/StdImages/4.gif'
     ],
     Mode:'V',     //(optional) the mode of execution, 'Horizontal' or 'Vertical'.      (string, default = 'Horizontal')
     Sides:6,      //(optional) the number of sides.                                    (number, default = the number of Images )
     Direction:-1  //(optional) the rotation direction, 1 = anti-clock, -1 = clockwise. (number, default = 1)
    });
    
    zxcSpinner.init({
     ID:'d2',
     Mode:'H',
     Sides:8,
     Images:[
      'http://www.vicsjavascripts.org.uk/StdImages/1.gif',
      'http://www.vicsjavascripts.org.uk/StdImages/2.gif',
      'http://www.vicsjavascripts.org.uk/StdImages/3.gif',
      'http://www.vicsjavascripts.org.uk/StdImages/4.gif'
     ]
    });
    
    
    
    /*]]>*/
    </script>
    </body>
    
    </html>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

Similar Threads

  1. Replies: 0
    Last Post: 06-18-2012, 05:20 PM
  2. Replies: 1
    Last Post: 03-18-2011, 02:59 PM
  3. Integrating Step Carousel Viewer with Dynamic Ajax Content
    By vecnaa in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 08-29-2010, 07:58 PM
  4. Integrating dynamic drive carousel with Wordpress
    By Dannymax in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 05-15-2009, 08:42 AM
  5. PHP Dynamic Carousel Slideshow
    By amwd07 in forum Dynamic Drive scripts help
    Replies: 10
    Last Post: 07-29-2008, 04:08 AM

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
  •