Good morning all,
I am trying to add the ability to give the user the option to use their keyboard arrows keys (left & right) to cycle through an image slideshow. Below is my HTML and CSS code. Any help would be greatly appreciated. Many thanks, Alan

[HTML]
<!-- slideshow -->
<div id="slideshow_container">
<div id="loader" class="loader_galleries"></div>
<div class="wrapper">
<div id="ps_container" class="ps_container">
<div class="ps_image_wrapper">
<!-- First initial image -->
<img src="jungle/large/jungle1.jpg"/><div class="ps_caption_title"><p class="captiontitle"></div></div>

<!-- Navigation items -->
<div class="ps_next"></div>
<div class="ps_prev"></div>
<!-- Dot list with thumbnail preview -->
<ul class="ps_nav">

<li><a href="jungle/large/jungle1.jpg" rel="jungle/thumbs/jungle1.jpg">
<div class="ps_caption_title"><p class="captiontitle"></div>
</a></li>

<li><a href="jungle/large/jungle2.jpg" rel="jungle/thumbs/jungle2.jpg">
<div class="ps_caption_title"><p class="captiontitle">Canadian Wildlife Magazine - Print Feature 2012</div>
</a></li>

<li><a href="jungle/large/jungle3.jpg" rel="jungle/thumbs/jungle3.jpg">
<div class="ps_caption_title"><p class="captiontitle">Canadian Wildlife Magazine - Print Feature 2012</div>
</a></li>

<li><a href="jungle/large/jungle4.jpg" rel="jungle/thumbs/jungle4.jpg">
<div class="ps_caption_title"><p class="captiontitle">Canadian Wildlife Magazine - Print Feature 2012</div>
</a></li>

<li><a href="jungle/large/jungle5.jpg" rel="jungle/thumbs/jungle5.jpg">
<div class="ps_caption_title"><p class="captiontitle">Canadian Wildlife Magazine - Print Feature 2012</div>
</a></li>

<li><a href="jungle/large/jungle6.jpg" rel="jungle/thumbs/jungle6.jpg">
<div class="ps_caption_title"><p class="captiontitle"></div>
</a></li>

<li><a href="jungle/large/jungle7.jpg" rel="jungle/thumbs/jungle7.jpg">
<div class="ps_caption_title"><p class="captiontitle"></div>
</a></li>

<li><a href="jungle/large/jungle8.jpg" rel="jungle/thumbs/jungle8.jpg">
<div class="ps_caption_title"><p class="captiontitle"></div>
</a></li>

<li><a href="jungle/large/jungle9.jpg" rel="jungle/thumbs/jungle9.jpg">
<div class="ps_caption_title"><p class="captiontitle"></div>
</a></li>

<li><a href="jungle/large/jungle10.jpg" rel="jungle/thumbs/jungle10.jpg">
<div class="ps_caption_title"><p class="captiontitle"></div>
</a></li>

<li><a href="jungle/large/jungle11.jpg" rel="jungle/thumbs/jungle11.jpg">
<div class="ps_caption_title"><p class="captiontitle"></div>
</a></li>

<li><a href="jungle/large/jungle12.jpg" rel="jungle/thumbs/jungle12.jpg">
<div class="ps_caption_title"><p class="captiontitle"></div>
</a></li>

<li class="ps_preview">
<div class="ps_preview_wrapper">
<!-- Thumbnail comes here -->
</div>
<!-- Little triangle -->
<span></span>
</li>
</ul>
</div>
</div>
</div>
<!-- slideshow -->
[/HTML]

Code:
#slideshow_container {
	height: 600px;
	width: 982px;
	margin-bottom: 80px;
}
*{
	margin:0;
	padding:0;
}
.loader {
	width: 900px;
	height: 600px;
	opacity: 0.7;
	z-index: 1000;
	background-color: #333;
	background-image: url(images/loader.gif);
	background-repeat: no-repeat;
	background-position: center center;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}
.loader_galleries {
	width: 900px;
	height: 600px;
	opacity: 0.7;
	z-index: 1000;
	background-color: #333;
	background-image: url(images/loader.gif);
	background-repeat: no-repeat;
	background-position: center center;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}

/* Preview Slider Gallery Style */
.ps_container{
	display:none;
	width:900px;
	height:600px;
	position:relative;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}
.ps_image_wrapper{
	width: 900px;
	height: 664px;
	overflow: hidden;
	position: relative;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}
.ps_image_wrapper img{
	position:absolute;
	left:0px;
	top:0px;
	overflow: hidden;
}
.ps_prev,
.ps_next{
	width: 45px;
	height: 600px;
	position: absolute;
	top: 0;
	cursor: pointer;
	opacity: 0.5;
}
.ps_prev{
	left: -45px;
	background-color: transparent;
	background-image: url(images/prev.png);
	background-repeat: no-repeat;
	background-position: center center;
	width: 45px;
}
.ps_next{
	right: -45px;
	background-color: transparent;
	background-image: url(images/next.png);
	background-repeat: no-repeat;
	background-position: center center;
	width: 45px;
}
.ps_prev:hover,
.ps_next:hover{
	opacity: 0.9;
	bottom: 0px;
	width: 45px;
}
ul.ps_nav{
	list-style: none;
	padding: 0;
	position: relative;
	margin-top: 20px;
	margin-right: auto;
	margin-bottom: 40px;
	margin-left: auto;
	width: 204px;
}
ul.ps_nav li{
	float:left;
}
ul.ps_nav li a{
	display:block;
	text-indent:-9000px;
	width:11px;
	height:11px;
	outline:none;
	padding:0px 3px;
	background-color: transparent;
	background-image: url(images/dot.png);
	background-repeat: no-repeat;
	background-position: center top;
}
ul.ps_nav li a:hover,ul.ps_nav li.selected a{
	background-position:50% -11px;
}
ul.ps_nav li.ps_preview{
	display:none;
	width:85px;
	height:91px;
	top:-85px;
	left:-34.5px; /*First item, next ones is leftDot - 0.5*wThis + 0.5*wDot, i.e. second one is (16 - 42.5 + 8) = -18.5 */
	position:absolute;
}
ul.ps_nav li.ps_preview span{
	width:15px;
	height:6px;
	position:absolute;
	top:65px;
	left:35px;
	background-color: transparent;
	background-image: url(images/triangle.png);
	background-repeat: no-repeat;
	background-position: center top;
}
.ps_preview_wrapper{
	width:75px;
	height:50px;
	border:5px solid #fff;
	overflow:hidden;
	position:relative;
}
.ps_preview_wrapper img{
	position:absolute;
	top:0px;
	left:0px;
}
.ps_caption_title {
	position: absolute;
	bottom: 4px;
	left: 0;
	text-align: left;
	width: 100%;
	padding-left: 20px;
	letter-spacing: 1px;
	overflow: hidden;
	height: 60px;
	padding-right: 20px;
}