Results 1 to 5 of 5

Thread: Highlight and navigate through images using arrow keys.

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

    Default Highlight and navigate through images using arrow keys.

    Hello,

    I am setting up a PHP website with a portfolio gallery, I have been searching for
    a Javascript / JQuery code that allows me to navigate and highlight the images in a page using the arrows
    of my keyboard and at the same time , calling a functionality (such as activating a small tool tip on highlight) . I've seen this functionality in some websites. Does someone know where I can find something like that?

    Thanks!

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,775
    Thanks
    2
    Thanked 411 Times in 406 Posts

    Default

    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>
    <style type="text/css">
    /*<![CDATA[*/
    
    .highlighton {
      border:solid red 4px;
    }
    
    .tooltip {
      position:absolute;z-Index:101;visibility:hidden;left:50px;top:159px;width:100px;background-Color:#FFCC66;text-Align:center;
    }
    
    /*]]>*/
    </style></head>
    
    <body>
    <img id="img1" class="highlight" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" />
    <img class="highlight" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" />
    <img id="img3" class="highlight" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" />
    
    <div id="img1-tooltip" class="tooltip" >Tool Tip 1</div>
    <div id="img3-tooltip" class="tooltip" style="top:0px;" >Tool Tip 3</div>
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function zxcHighLightImage(o){
     var oop=this,cls=o.ClassName,i=o.SelectIndex,imgs=document.getElementsByTagName('IMG'),c,ary=[],tt,z0=0;
     for (var z0=0;z0<imgs.length;z0++){
      c=imgs[z0].className;
      if ((' '+c+' ').match(' '+cls+' ')){
       tt=document.getElementById(imgs[z0].id+'-tooltip');;
       ary.push([imgs[z0],c,c+' '+o.ActiveClass,tt,tt?tt.offsetLeft:null,tt?tt.offsetTop:null]);
      }
     }
     o={
      ary:ary,
      lgth:ary.length-1,
      cnt:typeof(i)=='number'?i:-1
     }
     this.select(o,o.cnt);
    // this.addevt(document,'keypress','key',o);
     this.addevt(document,'keydown','key',o);
    }
    
    zxcHighLightImage.prototype={
    
     key:function(e,o){
      var cc=e.which?e.which:event.keyCode,c=o.cnt,p;
      if (cc==37||cc==39){
       o.ary[c]?o.ary[c][0].className=o.ary[c][1]:null;
       o.ary[c]&&o.ary[c][3]?o.ary[c][3].style.visibility='hidden':null;
       c+=(cc==39?1:-1);
       c=c<0?o.lgth:c>o.lgth?0:c;
       this.select(o,c);
      }
      o.cnt=c;
      return false;
     },
    
     select:function(o,c){
      if (o.ary[c]){
       o.ary[c]?o.ary[c][0].className=o.ary[c][2]:null;
       if (o.ary[c][3]){
        p=this.pos(o.ary[c][0]);
        o.ary[c][3].style.visibility='visible';
        o.ary[c][3].style.left=p[0]+o.ary[c][4]+'px';
        o.ary[c][3].style.top=p[1]+o.ary[c][5]+'px';
       }
      }
     },
    
     pos:function(obj){
      var rtn=[0,0];
      while(obj){
       rtn[0]+=obj.offsetLeft;
       rtn[1]+=obj.offsetTop;
       obj=obj.offsetParent;
      }
      return rtn;
     },
    
     addevt:function(o,t,f,p){
      var oop=this;
      if (o.addEventListener){
       o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
      }
      else if (o.attachEvent){
       o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
      }
     }
    
    }
    
    new zxcHighLightImage({
     ClassName:'highlight',
     ActiveClass:'highlighton',
     SelectIndex:1
    })
    /*]]>*/
    </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/

  3. #3
    Join Date
    Feb 2013
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Thank you for your reply! That works fine, it's almost what I was looking for. I appreciate it!
    What I am looking for more specifically is a Javascript / JQuery code that allows me to navigate and highlight the images in a page using the arrows and also the mouse, the images have to be clickable , but when highlighted, some customized info can be shown.

    The attached images are an example of how I want the effect to be.

    I imagine I have to use more than three scripts for such thing, the code vwphillips provided , helped me have a more general idea.
    Thanks.
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	template.jpg 
Views:	92 
Size:	14.2 KB 
ID:	5047   Click image for larger version. 

Name:	template.jpg 
Views:	93 
Size:	18.2 KB 
ID:	5048  

  4. #4
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,775
    Thanks
    2
    Thanked 411 Times in 406 Posts

    Default

    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>
    <style type="text/css">
    /*<![CDATA[*/
    
    .highlighton {
      border:solid red 4px;
    }
    
    .tooltip {
      position:absolute;z-Index:101;visibility:hidden;left:0px;top:0px;width:100px;background-Color:#FFCC66;text-Align:center;
    }
    
    #info {
      position:absolute;left:650px;top:20px;width:100px;height:200px;background-Color:#FFCC66;border:solid red 1px;
    }
    
    /*]]>*/
    </style></head>
    
    <body>
    <img id="img1" class="highlight" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" />
    <img id="img2" class="highlight" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" />
    <img id="img3" class="highlight" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" />
    
    <div id="info" >
    <div id="img1-tooltip" class="tooltip" >Tool Tip 1</div>
    <div id="img2-tooltip" class="tooltip" >Tool Tip 2</div>
    <div id="img3-tooltip" class="tooltip" >Tool Tip 3</div>
    </div>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function zxcHighLightImage(o){
     var oop=this,cls=o.ClassName,acls=o.ActiveClass,i=o.SelectIndex,imgs=document.getElementsByTagName('IMG'),c,ary=[],tt,z0=0;
     o={
      ary:[],
      cnt:typeof(i)=='number'?i:-1
     }
     for (var z0=0;z0<imgs.length;z0++){
      c=imgs[z0].className;
      if ((' '+c+' ').match(' '+cls+' ')){
       tt=document.getElementById(imgs[z0].id+'-tooltip');;
       o.ary.push([imgs[z0],c,c+' '+acls,tt,tt?tt.offsetLeft:null,tt?tt.offsetTop:null,0]);
       this.addevt(imgs[z0],'mouseover','select',o,o.ary.length-1);
      }
     }
     o.lgth=o.ary.length-1,
     this.select(o,o.cnt);
    // this.addevt(document,'keypress','key',o);
     this.addevt(document,'keydown','key',o);
    }
    
    zxcHighLightImage.prototype={
    
     key:function(o,p1,e){
      var cc=e.which?e.which:event.keyCode,c=o.cnt,p;
      if (cc==37||cc==39){
       c+=(cc==39?1:-1);
       c=c<0?o.lgth:c>o.lgth?0:c;
       this.select(o,c);
      }
      o.cnt=c;
      return false;
     },
    
     select:function(o,c){
      if (o.ary[c]){
       o.ary[o.cnt]?o.ary[o.cnt][0].className=o.ary[o.cnt][1]:null;
       o.ary[o.cnt]&&o.ary[o.cnt][3]?o.ary[o.cnt][3].style.visibility='hidden':null;
       o.ary[c]?o.ary[c][0].className=o.ary[c][2]:null;
       if (o.ary[c][3]){
        o.ary[c][3].style.visibility='visible';
       }
       o.cnt=c;
      }
     },
    
     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); });
      }
     }
    
    }
    
    new zxcHighLightImage({
     ClassName:'highlight',
     ActiveClass:'highlighton',
     SelectIndex:1
    })
    /*]]>*/
    </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/

  5. The Following User Says Thank You to vwphillips For This Useful Post:

    Hazeroth (04-28-2013)

  6. #5
    Join Date
    Feb 2013
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Amazing! That is what I was looking for! Thank you very much, it works like a charm.

Similar Threads

  1. Replies: 2
    Last Post: 01-22-2013, 01:58 PM
  2. Navigate (highlight) a specified row in a table
    By jason_kelly in forum JavaScript
    Replies: 1
    Last Post: 01-18-2013, 08:34 PM
  3. Need help activating slideshow navigation with arrow keys
    By MamaGeek in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 11-25-2012, 03:47 PM
  4. Use Arrows keys to move to and highlight row
    By jason_kelly in forum JavaScript
    Replies: 7
    Last Post: 06-28-2012, 03:00 PM
  5. Replies: 0
    Last Post: 12-23-2010, 12:59 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
  •