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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    May 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Need coding help with keyboard

    I have an image gallery and I want viewers of my website to be able to go to the next or previous photo by pressing the left or right arrow on their keyboard. How do I do this?

  • #2
    New Coder
    Join Date
    Feb 2013
    Location
    Liverpool
    Posts
    68
    Thanks
    1
    Thanked 3 Times in 3 Posts
    You'll need to find a specific plugin that supports this - not sure if it's the sort of thing that would be wise to code yourself so I'd search for a jquery gallery plugin that has that as a feature.

    Someone's asked a similar question here using Galleria plugin and seems to have got it working http://stackoverflow.com/questions/1...ria-javascript
    Working for Edge Three Sixty doing Drupal Development

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,468
    Thanks
    3
    Thanked 495 Times in 482 Posts
    please post a link to your image gallery

    or

    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>
     Simple Slide Show converted to OOP method 1 with animated fade<br />
     <input type="button" name="" value="GoTo 0" onmouseup="SS3.GoTo('E4',0);" />
     <input type="button" name="" value="GoTo 1" onmouseup="SS3.GoTo('E4',1);" />
     <input type="button" name="" value="GoTo 2" onmouseup="SS3.GoTo('E4',2);" />
     <input type="button" name="" value="GoTo 3" onmouseup="SS3.GoTo('E4',3);" />
     <input type="button" name="" value="Next" onmouseup="SS3.Next('E4',1);" />
     <input type="button" name="" value="Back" onmouseup="SS3.Next('E4',-1);" />
     <br />
     <img id="E4" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img"  onmouseover="SS3.Pause('E4');" onmouseout="SS3.Auto('E4');" />
    <script type="text/javascript">
    /*<![CDATA[*/
    
    var SS3={
    
     Next:function(id,ud){
      var o=this[id],ud=(typeof(ud)=='number'&&ud<0?-1:1);
      if (o){
       o.ud=ud;
       this.rotate(o,0,o.cnt+ud);
      }
     },
    
     GoTo:function(id,nu){
      var o=this[id];
      if (o&&o.ary[nu]){
       o.ud=nu>o.cnt?1:-1;;
       o.cnt=nu;
       this.rotate(o,0,nu)
      }
     },
    
     Auto:function(id,ms){
      var o=this[id],oop=this;
      if (o){
       o.to=setTimeout(function(){ oop.rotate(o,o.ud,true); },ms||200);
      }
     },
    
    
     Pause:function(id){
      var o=this[id];
      if (o){
       clearTimeout(o.to);
      }
     },
    
     init:function(o){
      var id=o.ID,m=o.Mode,ary=o.Imgs,ms=o.Animate,hold=o.Hold,add=o.AddEvents,srt=o.AutoStart,m=typeof(m)=='string'?m.charAt(0).toLowerCase():'',ms=typeof(ms)=='number'&&ms>0?ms:1000,img=document.getElementById(id),src,c=document.createElement('IMG'),e,z0=0,z1=0;
      if (img&&ary instanceof Array){
       c.style.position='absolute';
       c.style.zIndex='101';
       c.style.left='-3000px';
       c.style.top='-3000px';
       document.body.appendChild(c);
       for (;z0<ary.length;z0++){
        src=ary[z0];
        ary[z0]=new Image();
        ary[z0].src=src;
       }
       this[id]={
        id:id,
        img:img,
        c:[c,m=='w'?'width':m=='h'?'height':''],
        ary:ary,
        lgth:ary.length-1,
        ud:1,
        ms:ms,
        hold:typeof(hold)=='number'&&hold>0?hold:ms*4,
        cnt:0
       }
       if (add instanceof Array){
        for (;z1<add.length;z1++){
         if (add[z0]&&add[z0][0]){
          o=document.getElementById(add[z1][0]);
          e=add[z1][1];
          if (o&&(e=='mouseup'||e=='mousedown'||e=='mouseover'||e=='mouseout'||e=='click')&&this[add[z1][2]]){
           this.addevt(o,e,add[z1][2],id,add[z1][3]);
          }
         }
        }
       }
       typeof(srt)=='number'&&srt>0?this.Auto(id,srt):null;
      }
     },
    
     rotate:function(o,ud,auto){
      this.Pause(o.id);
      var p=this.pos(o.img),oop=this,cnt=o.cnt;
      o.auto=auto===true;
      o.cnt=auto===true?o.cnt+=ud:auto;
      o.cnt=o.cnt<0?o.lgth:o.cnt>o.lgth?0:o.cnt;
      if (o.ary[o.cnt].width>40){
       o.c[0].style.width=o.img.width+'px';
       o.c[0].style.height=o.img.height+'px';
       o.c[0].src=o.ary[o.cnt].src;
       this.animate(o,o.c,0,o.c[1]?o.img[o.c[1]]:100,new Date(),o.ms);
       o.c[0].style.left=p[0]+'px';
       o.c[0].style.top=p[1]+'px';
      }
      else if (o.auto){
       oop.Auto(o.id);
      }
     },
    
     animate:function(o,a,f,t,srt,mS){
      clearTimeout(a[2]);
      var oop=this,ms=new Date().getTime()-srt,n=(t-f)/mS*ms+f;
      if (isFinite(n)){
       a[1]?a[0].style[a[1]]=n+'px':oop.opc(a[0],n);
      }
      if (ms<mS){
       a[2]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS); },10);
      }
      else {
       a[1]?a[0].style[a[1]]=t+'px':oop.opc(a[0],t);
       o.img.src=a[0].src;
       a[0].style.top='-3000px';
       o.auto?oop.Auto(o.id,o.hold):null;
      }
     },
    
     opc:function(o,n){
      o.style.filter='alpha(opacity='+n+')';
      o.style.opacity=o.style.MozOpacity=o.style.WebkitOpacity=o.style.KhtmlOpacity=n/100-.001;
     },
    
     pos:function(o){
      var rtn=[0,0];
      while(o){
       rtn[0]+=o.offsetLeft;
       rtn[1]+=o.offsetTop;
       o=o.offsetParent;
      }
      return rtn;
     },
    
     addevt:function(o,t,f,p,p1){
      var oop=this;
      if (o.addEventListener){
       o.addEventListener(t,function(e){ return oop[f](p,p1,e);}, false);
      }
      else if (o.attachEvent){
       o.attachEvent('on'+t,function(e){ return oop[f](p,p1,e); });
      }
     }
    
    }
    
    SS3.init({
     ID:'E4',      // the unique ID name of the image.                              (string)
     Imgs:[        // an array befining the image SRCs.                             (array)
     'http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg',
     'http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg',
     'http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg',
     'http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg'
     ],
     Animate:1000, //(optional) the animation duration in milli seconds.             (number, default = 1000)
     Mode:'fade',  //(optional) the mode of execution, fade, width or height.        (string, default = fade)
     Hold:2000,     //(optional) the auto rotation 'hold' delay milli seconds.        (number, default = Animate*4)
     AutoStart:500 //(optional) the delay milli seconds before starting auto rotate. (number, default = no auto start)
    });
    
    function KeyCode(e){
     e=e||window.event;
     var kk=e.which?e.which:event.keyCode ;
     kk==39||kk==37?SS3.Next('E4',kk==39?1:-1):null;
     return false;
    }
    
    //document.onkeypress=function(evt){ KeyCode(evt); }
    document.onkeydown=function(evt){  KeyCode(evt); }
    
    /*]]>*/
    </script>
    
    </body>
    
    </html>
    Last edited by vwphillips; 05-31-2013 at 11:56 AM.
    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/


  •  

    Posting Permissions

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