Adding direction controls to a simple picture gallery for a website
by David Halls
Ardrishaig and the Crinan Canal
Windows Fax and Picture Viewer that is on most users' computers allows you to use the left and right arrow controls on your keyboard to advance though a series of pictures. This is in addition to the clickable controls on the bottom of the screen.
Would it not be great if we could do this also with web picture galleries? This article explores how to do this. You can try it on the picture gallery above.
Responding to the direction controls - a test program
It is always a good idea in development to set up a simple program to test the function you wish to incorporate. Once it is working, it can be inserted in a larger program.
I used two sources for information on programming key events in Javascript - one in Geekpedia and the other in W3Schools. From both these tutorials, it is clear that there is not agreement between browsers on the code to pick up an event and the programming has to take account of two possibilities. The code shown below adapts the W3Schools code to show when a left or right arrow key is pressed. If you are interested in programming other keys, the table shows the keycodes for some of the control keys. For our example, we need to respond to events from pressing the left and right arrow keys with character codes of 37 and 39, respectively. If they are pressed, a div called myspace shows the name of the key pressed when the key is released. The onkeyup event is attached to the body of the page.
| Key | Ctrl | Alt | Pause | Arrow Left | Arrow Up | Arrow Right | Arrow Down | Char Code | 17 | 18 | 19 | 37 | 38 | 39 | 40 |
|---|
<html>
<head>
<title>Keyup Test Program</title>
<script type="text/javascript">
function showresult(e)
{
var keynum
if(window.event) // IE
{
keynum = e.keyCode
}
else if(e.which) // Netscape/Firefox/Opera
{
keynum = e.which
}
switch(keynum)
{case 37:
document.getElementById('myspace').innerHTML="Arrow Left";
break;
case 39:
document.getElementById('myspace').innerHTML="Arrow Right";
break;
}
}
</script>
</head>
<body onkeyup="showresult(event)">
<div id = "myspace" />
Event
</div>
</body>
</html>
Adding this code to the picture gallery
An earlier article described a simple picture gallery using inline javascript. Some modifications were described in a subsequent article to allow the use of "Prev" and "Next" buttons to allow sequential movement through the gallery and addition of captions for each individual image. We can now add the ability to use the direction controls as an alternative to the "Prev" and "Next" buttons using the code above. We replace the code to display "Arrow Left" and "Arrow Right" with a call to the functions previmg() and nextimg() which were established to respond to a click of the "Prev" and "Next" buttons, respectively. The functions are explained here
function keychange(e)
{
var keynum
if(window.event) // IE
{
keynum = e.keyCode
}
else if(e.which) // Netscape/Firefox/Opera
{
keynum = e.which
}
switch(keynum)
{case 37:
previmg(locator);
return false;
break;
case 39:
nextimg(locator);
return false;
break;
}
}
To the body of the page, add the onkeyup trigger as below:-
<body onkeyup="keychange(event)">
Conclusion
The code shown here allows the use of left and right arrows on the keyboard to allow progress through a series of images in a gallery. It is shown to work with the gallery in a previous article, but can be adapted to work with other types of gallery.
Article Date: 14th March 2011.