Question

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];
    });
});

</script>

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"

Answer 1

I think the problem is you are defining the imgIndex as a local variable inside the ‘ready’ handler, and try to use as a global. In this case both prev/next handlers will get their own copies of imgIndex.

Check this fiddle: http://jsfiddle.net/BuddhiP/f2WzJ/

var imgArray = ['img1', 'img2', 'img3', 'img4', 'img5'];
var imgIndex = 3;

$(document).ready(function() {
    var $img = $("#imgIndex");
    $img.text(imgIndex);
    //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];
             $img.text(imgIndex);
        }
        if (key == leftarrow) {
            if (imgIndex == 0) {
                imgIndex = imgArray.length;
            }

            //img.src = imgArray[--imgIndex];
            $img.text(--imgIndex);
        }
    });

    $("#next").click(function() {
        imgIndex++;
        if (imgIndex > imgArray.length - 1) {
            imgIndex = 0;
        }
        $img.text(imgIndex);
        //img.src = imgArray[imgIndex];
    });
    $("#prev").click(function() {
        if (imgIndex == 0) {
            imgIndex = imgArray.length;
        }
        $img.text(--imgIndex);
        //img.src = imgArray[--imgIndex];
    });
});​