Thank you Pullo… it really worked perfectly. I just have to ask you if you can explain the code word by word so I can learn a bit from this also. Thank you again for being patient enough with me. I know I was no help… 
Yay!
<!-- Include the jQuery library. It's not strictly necessary, but irons out a few cross-browser incompatibilities -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
// Listen for the keydown event
$(document).keydown(function(e){
//Was the left arrow key pressed?
if (e.keyCode == 37) {
// Prevent the browser's default action (so that the page doesn't scroll, for example)
e.preventDefault();
// Navigate the browser to the address in the prev span's anchor tag
window.location.href = $(".prev > a").attr("href");
//Was the right arrow key pressed?
} else if (e.keyCode == 39) {
// Prevent the browser's default action (so that the page doesn't scroll, for example)
e.preventDefault();
// Navigate the browser to the address in the next span's anchor tag
window.location.href = $(".next > a").attr("href");
}
});
HTH
So here this make sure the ’ right arrow’ does not scroll left or right but it takes the current page to the next page?
// Navigate the browser to the address in the prev span’s anchor tag
window.location.href = $(“.prev > a”).attr(“href”);
Does the ‘a’ here stands for anchor tag ? Why do we have two ’ href ’ s here?
Thanks again Pullo…
Exactly.
You have this HTML:
<span class="prev"><a href="/viewgallery.php?cname=Colorado-Fall&pcaption=Gold"><img src="/photos/assets/left.png" border="0"></a></span>
$(".prev > a") will select any <a> elements that are direct children of any elements with a class of “prev”
$(".prev > a").attr("href") will get the href value of any <a> elements that are direct children of any elements with a class of “prev”
You could also write:
var prevLinkAddress = $(".prev > a").attr("href")
Then we navigate the browser to this address, by setting the href property of the window.location object (at least, I think it’s an object).
window.location.href = $(".prev > a").attr("href");
or
window.location.href = prevLinkAddress;
Does that make sense?
Thank you, it does makes sense now. Your patience is incredible…
Happy to help
Glad you got things working.
Hi Pullo…
I hope you can help me with this. I am trying to add swipe capability on my image page you helped me install arrow key navigation. I came across this code and tutorial. I did try to make it work but I am pretty sure I am going about it in the wrong way. I added this code to my <head> tags. This is the code…
<script type="text/javascript">
// TOUCH-EVENTS SINGLE-FINGER SWIPE-SENSING JAVASCRIPT
// Courtesy of PADILICIOUS.COM and MACOSXAUTOMATION.COM
// this script can be used with one or more page elements to perform actions based on them being swiped with a single finger
var triggerElementID = null; // this variable is used to identity the triggering element
var fingerCount = 0;
var startX = 0;
var startY = 0;
var curX = 0;
var curY = 0;
var deltaX = 0;
var deltaY = 0;
var horzDiff = 0;
var vertDiff = 0;
var minLength = 72; // the shortest distance the user may swipe
var swipeLength = 0;
var swipeAngle = null;
var swipeDirection = null;
// The 4 Touch Event Handlers
// NOTE: the touchStart handler should also receive the ID of the triggering element
// make sure its ID is passed in the event call placed in the element declaration, like:
// <div id="picture-frame" ontouchstart="touchStart(event,'picture-frame');" ontouchend="touchEnd(event);" ontouchmove="touchMove(event);" ontouchcancel="touchCancel(event);">
function touchStart(event,passedName) {
// disable the standard ability to select the touched object
event.preventDefault();
// get the total number of fingers touching the screen
fingerCount = event.touches.length;
// since we're looking for a swipe (single finger) and not a gesture (multiple fingers),
// check that only one finger was used
if ( fingerCount == 1 ) {
// get the coordinates of the touch
startX = event.touches[0].pageX;
startY = event.touches[0].pageY;
// store the triggering element ID
triggerElementID = passedName;
} else {
// more than one finger touched so cancel
touchCancel(event);
}
}
function touchMove(event) {
event.preventDefault();
if ( event.touches.length == 1 ) {
curX = event.touches[0].pageX;
curY = event.touches[0].pageY;
} else {
touchCancel(event);
}
}
function touchEnd(event) {
event.preventDefault();
// check to see if more than one finger was used and that there is an ending coordinate
if ( fingerCount == 1 && curX != 0 ) {
// use the Distance Formula to determine the length of the swipe
swipeLength = Math.round(Math.sqrt(Math.pow(curX - startX,2) + Math.pow(curY - startY,2)));
// if the user swiped more than the minimum length, perform the appropriate action
if ( swipeLength >= minLength ) {
caluculateAngle();
determineSwipeDirection();
processingRoutine();
touchCancel(event); // reset the variables
} else {
touchCancel(event);
}
} else {
touchCancel(event);
}
}
function touchCancel(event) {
// reset the variables back to default values
fingerCount = 0;
startX = 0;
startY = 0;
curX = 0;
curY = 0;
deltaX = 0;
deltaY = 0;
horzDiff = 0;
vertDiff = 0;
swipeLength = 0;
swipeAngle = null;
swipeDirection = null;
triggerElementID = null;
}
function caluculateAngle() {
var X = startX-curX;
var Y = curY-startY;
var Z = Math.round(Math.sqrt(Math.pow(X,2)+Math.pow(Y,2))); //the distance - rounded - in pixels
var r = Math.atan2(Y,X); //angle in radians (Cartesian system)
swipeAngle = Math.round(r*180/Math.PI); //angle in degrees
if ( swipeAngle < 0 ) { swipeAngle = 360 - Math.abs(swipeAngle); }
}
function determineSwipeDirection() {
if ( (swipeAngle <= 45) && (swipeAngle >= 0) ) {
swipeDirection = 'left';
} else if ( (swipeAngle <= 360) && (swipeAngle >= 315) ) {
swipeDirection = 'left';
} else if ( (swipeAngle >= 135) && (swipeAngle <= 225) ) {
swipeDirection = 'right';
} else if ( (swipeAngle > 45) && (swipeAngle < 135) ) {
swipeDirection = 'down';
} else {
swipeDirection = 'up';
}
}
function processingRoutine() {
var swipedElement = document.getElementById(triggerElementID);
if ( swipeDirection == 'left' ) {
// REPLACE WITH YOUR ROUTINES
swipedElement.style.backgroundColor = 'orange';
} else if ( swipeDirection == 'right' ) {
// REPLACE WITH YOUR ROUTINES
swipedElement.style.backgroundColor = 'green';
} else if ( swipeDirection == 'up' ) {
// REPLACE WITH YOUR ROUTINES
swipedElement.style.backgroundColor = 'maroon';
} else if ( swipeDirection == 'down' ) {
// REPLACE WITH YOUR ROUTINES
swipedElement.style.backgroundColor = 'purple';
}
}
</script>
And I made changes, which I am pretty sure they are very newbie like…
function processingRoutine() {
var swipedElement = document.getElementById(triggerElementID);
if ( swipeDirection == 'left' ) {
// REPLACE WITH YOUR ROUTINES
// swipedElement.style.backgroundColor = 'orange';
event.preventDefault();
window.location.href = $(".next > a").attr("href");
} else if ( swipeDirection == 'right' ) {
// REPLACE WITH YOUR ROUTINES
// swipedElement.style.backgroundColor = 'green';
event.preventDefault();
window.location.href = $(".prev > a").attr("href"); }
}
}
And also here…
function touchStart(event,'prevnext') {
// disable the standard ability to select the touched object
event.preventDefault();
// get the total number of fingers touching the screen
fingerCount = event.touches.length;
// since we're looking for a swipe (single finger) and not a gesture (multiple fingers),
// check that only one finger was used
if ( fingerCount == 1 ) {
// get the coordinates of the touch
startX = event.touches[0].pageX;
startY = event.touches[0].pageY;
// store the triggering element ID
triggerElementID = passedName;
} else {
// more than one finger touched so cancel
touchCancel(event);
}
}
Am I anywhere close to get this working ? 
Sorry if I am doing ridiculous coding practices…
Hi,
Sorry for the delay in getting back to you.
For touch gestures, I would use hammer.js.
Here’s a guide to getting started: https://github.com/EightMedia/hammer.js/wiki/Getting-Started
And some tips and tricks: https://github.com/EightMedia/hammer.js/wiki/Tips-&-Tricks
Have a go at implementing it on your site.
If you get stuck, let me know
Thank you Pullo!