PDA

View Full Version : 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
<!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
<!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>

Hazeroth
04-28-2013, 04:01 PM
Amazing! That is what I was looking for! Thank you very much, it works like a charm.