Keyboard Navigation

[r361na]

Hello..

i'm newbie in javascript and i'm using thumbnailviewer2.js for making my images gallery.

Now, i wanna make left/right navigation from keyboard.
so, the images can change (previous/next) when i press the left/right arrow from keyboard. unfortunatelly, i don't know how to do it.

is there someone out there can help me?

i really..really need your help!

- Regards -

[jscheuer1]

Warning: Please include a link to the DD script in question in your post. See this thread for the proper posting format when asking a question.

But, if you mean:

http://www.dynamicdrive.com/dynamici...thumbnail2.htm

You are in luck, just substitute this script:

// -------------------------------------------------------------------
// Image Thumbnail Viewer II- By Dynamic Drive, available at: http://www.dynamicdrive.com
// Last updated: 30/Apr/2008 in http://www.dynamicdrive.com/forums by jscheuer1
// -------------------------------------------------------------------

var thumbnailviewer2={
enableTitle: true, //Should "title" attribute of link be used as description?
enableTransition: true, //Enable fading transition in IE?
hideimgmouseout: false, //Hide enlarged image when mouse moves out of anchor link? (if enlarged image is hyperlinked, always set to false!)
enableArrows: true, //Create a chain of the larger images accesible via the left and right arrow keys
startArrows: 0, //If enableArrows is true, set this to the image reference for the right arrow if no image has been selected yet (0 or 1)

/////////////No need to edit beyond here/////////////////////////

iefilterstring: 'progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=1.0 Duration=0.7)', //IE specific multimedia filter string
iefiltercapable: document.compatMode && window.createPopup? true : false, //Detect browser support for IE filters
preloadedimages:[], //array to preload enlarged images (ones set to display "onmouseover"
targetlinks:[], //array to hold participating links (those with rel="enlargeimage:initType")
alreadyrunflag: false, //flag to indicate whether init() function has been run already come window.onload

loadimage:function(linkobj){
var next=null, prev=null; // Added for Arrows Chaining
var imagepath=linkobj.getAttribute("href") //Get URL to enlarged image
var showcontainer=document.getElementById(linkobj.getAttribute("rev").split("::")[0]) //Reference container on page to show enlarged image in
var dest=linkobj.getAttribute("rev").split("::")[1] //Get URL enlarged image should be linked to, if any
var description=linkobj.rel.split('::')[2]? linkobj.rel.split('::')[2] : ""; //Get title attr
var imageHTML='<img src="'+imagepath+'" style="border-width: 0" alt="Enlarged Image Missing" title="">' //Construct HTML for enlarged image
if (typeof dest!="undefined") //Hyperlink the enlarged image?
imageHTML='<a href="'+dest+'">'+imageHTML+'</a>'
if(this.enableArrows) // Added for Arrows Chaining
for (var i = this.loadchains[linkobj.rev].length-1; i > -1; --i)
if(this.loadchains[linkobj.rev][i]==linkobj){
next=i<this.loadchains[linkobj.rev].length-1? i+1 : 0;
prev=i==0? this.loadchains[linkobj.rev].length-1 : i-1;
break;
} // Two below lines intended for IE 7 plus if conditional tloadarea present
if(document.getElementById('t'+linkobj.rev.split("::")[0]))
document.getElementById('t'+linkobj.rev.split("::")[0]).innerHTML=description;
else if (description!="") //Use title attr of the link as description?
imageHTML+='<br />'+description
if (this.iefiltercapable){ //Is this an IE browser that supports filters?
showcontainer.style.filter=this.iefilterstring
showcontainer.filters[0].Apply()
}
showcontainer.innerHTML=imageHTML
this.featureImage=showcontainer.getElementsByTagName("img")[0] //Reference enlarged image itself
this.featureImage.onload=function(){ //When enlarged image has completely loaded
if (thumbnailviewer2.iefiltercapable) //Is this an IE browser that supports filters?
showcontainer.filters[0].Play()
}
this.featureImage.onerror=function(){ //If an error has occurred while loading the image to show
if (thumbnailviewer2.iefiltercapable) //Is this an IE browser that supports filters?
showcontainer.filters[0].Stop()
}
if(typeof next=='number'){ // Added for Arrows Chaining
var c1=this.loadchains[linkobj.rev][prev], f1=function(){c1['on'+c1.rel.split('::')[1]].apply(c1);return false;};
var c2=this.loadchains[linkobj.rev][next], f2=function(){c2['on'+c2.rel.split('::')[1]].apply(c2);return false;};
document.onkeydown=function(e){var e=e||window.event;
if(e.keyCode==37) //prev
f1();
else if(e.keyCode==39) //next
f2();
}
}
},

hideimage:function(linkobj){
var showcontainer=document.getElementById(linkobj.getAttribute("rev").split("::")[0]) //Reference container on page to show enlarged image in
showcontainer.innerHTML=""
},


cleanup:function(){ //Clean up routine on page unload
if (this.featureImage){this.featureImage.onload=null; this.featureImage.onerror=null; this.featureImage=null}
this.showcontainer=null // does this do anything?  If not, is it intended to, and is that potentially important?
for (var i=0; i<document.links.length; i++){ // Changed to document.links for Arrows Chaining
document.links[i].onclick=null
document.links[i].onmouseover=null
document.links[i].onmouseout=null
}
},

addEvent:function(target, functionref, tasktype){ //assign a function to execute to an event handler (ie: onunload)
tasktype=(window.addEventListener)? tasktype : "on"+tasktype
if (target.addEventListener)
target.addEventListener(tasktype, functionref, false)
else if (target.attachEvent)
target.attachEvent(tasktype, functionref)
},

init:function(){ //Initialize thumbnail viewer script
if(this.enableArrows) // Added for Arrows Chaining
this.loadchains=new Object();
this.iefiltercapable=(this.iefiltercapable && this.enableTransition) //True or false: IE filters supported and is enabled by user
var pagelinks=document.getElementsByTagName("a")
for (var i=0; i<pagelinks.length; i++){ //BEGIN FOR LOOP
if (pagelinks[i].getAttribute("rel") && /enlargeimage:/i.test(pagelinks[i].getAttribute("rel"))){ //Begin if statement: Test for rel="enlargeimage"
if(this.enableArrows){ // Added for Arrows Chaining
if(!this.loadchains[pagelinks[i].rev.split('::')[0]])
this.loadchains[pagelinks[i].rev.split('::')[0]]=[];
this.loadchains[pagelinks[i].rev.split('::')[0]].push(pagelinks[i]);
}
var initType=pagelinks[i].getAttribute("rel").split("::")[1] //Get display type of enlarged image ("click" or "mouseover")
if (initType=="mouseover"){ //If type is "mouseover", preload the enlarged image for quicker display
this.preloadedimages[this.preloadedimages.length]=new Image()
this.preloadedimages[this.preloadedimages.length-1].src=pagelinks[i].href
pagelinks[i]["onclick"]=function(){ //Cancel default click action
return false
}
}
pagelinks[i]["on"+initType]=function(){ //Load enlarged image based on the specified display type (event)
thumbnailviewer2.loadimage(this) //Load image
return false
}
if (this.hideimgmouseout)
pagelinks[i]["onmouseout"]=function(){
thumbnailviewer2.hideimage(this)
}
this.targetlinks[this.targetlinks.length]=pagelinks[i] //store reference to target link
} //end if statement
} //END FOR LOOP

if(thumbnailviewer2.loadchains){
for (var p in thumbnailviewer2.loadchains)
if(thumbnailviewer2.loadchains[p]){
p=thumbnailviewer2.loadchains[p];
break;
}
document.onkeydown=function(e){
var e=e||window.event;
var c1=p[p.length-1], f1=function(){c1['on'+c1.rel.split('::')[1]].apply(c1);return false;};
var c2=p[thumbnailviewer2.startArrows], f2=function(){c2['on'+c2.rel.split('::')[1]].apply(c2);return false;};
if(e.keyCode==37) //prev
f1();
else if(e.keyCode==39) //next
f2();
}
}


} //END init() function

}


if (document.addEventListener) //Take advantage of "DOMContentLoaded" event in select Mozilla/ Opera browsers for faster init
thumbnailviewer2.addEvent(document, function(){thumbnailviewer2.alreadyrunflag=1; thumbnailviewer2.init()}, "DOMContentLoaded") //Initialize script on page load
else if (document.all && document.getElementsByTagName("a").length>0){ //Take advantage of "defer" attr inside SCRIPT tag in IE for instant init
thumbnailviewer2.alreadyrunflag=1
thumbnailviewer2.init()
}
thumbnailviewer2.addEvent(window, function(){if (!thumbnailviewer2.alreadyrunflag) thumbnailviewer2.init()}, "load") //Default init method: window.onload
thumbnailviewer2.addEvent(window, function(){thumbnailviewer2.cleanup()}, "unload")

for thumbnailviewer2.js

Demo:

http://home.comcast.net/~jscheuer1/s...lviewer2arrow/

[r361na]

Wow! It's totally works!

Thank you very, very, very much John.

I'm sorry for not included the script and link

- Best Regards -

(Regina)