I'd like to navigate images using both keyboard and mouse (clicking left and right arrow images).
I'm using Jquery to do this, but the shared imgIndex seems to be off from the .keydown function and the .click function... Whenever .keydown function -- or ++ the imgIndex, isn't that changed index also used in the click function? So shouldn't they always be on the same index?
keydown function:
<script type="text/javascript">
var imgArray = [<?php echo implode(',', getImages($site)) ?>];
$(document).ready(function() {
var img = document.getElementById("showimg");
img.src = imgArray[<?php echo $imgid ?>];
var imgIndex = <?php echo $imgid ?>;
alert(imgIndex);
$(document).keydown(function (e) {
var key = e.which;
var rightarrow = 39;
var leftarrow = 37;
var random = 82;
if (key == rightarrow)
{
imgIndex++;
if (imgIndex > imgArray.length-1)
{
imgIndex = 0;
}
img.src = imgArray[imgIndex];
}
if (key == leftarrow)
{
if (imgIndex == 0)
{
imgIndex = imgArray.length;
}
img.src = imgArray[--imgIndex];
}
});
click function: Connected to left and right clickable images
$("#next").click(function() {
imgIndex++;
if (imgIndex > imgArray.length-1)
{
imgIndex = 0;
}
img.src = imgArray[imgIndex];
});
$("#prev").click(function() {
if (imgIndex == 0)
{
imgIndex = imgArray.length;
}
img.src = imgArray[--imgIndex];
});
});
Just so you have some visibility into the getImages php function:
<?php
function getImages($siteParam) {
include 'dbconnect.php';
if ($siteParam == 'artwork') {
$table = "artwork";
}
else {
$table = "comics";
}
$catResult = $mysqli->query("SELECT id, title, path, thumb, views, catidFK FROM $table");
$img = array();
while($row = $catResult->fetch_assoc())
{
$img[] = "'" . $row['path'] . "'";
}
return $img;
}
?>
Much appreciated!
Snapshot of where the script is on "view image.php"
