Highlight and navigate through images using arrow keys.

**Hazeroth** · 04-27-2013, 05:55 AM

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!

**vwphillips** · 04-27-2013, 11:31 AM

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>

**Hazeroth** · 04-27-2013, 09:33 PM

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.

**vwphillips** · 04-28-2013, 11:51 AM

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>