index seems to be out of sync for jquery .keydown and .click methods
Posted
by
Growler
on Stack Overflow
See other posts from Stack Overflow
or by Growler
Published on 2012-11-21T02:01:08Z
Indexed on
2012/11/25
5:04 UTC
Read the original article
Hit count: 204
jQuery
|javascript-events
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"
© Stack Overflow or respective owner