0

Hello I have just created the following JavaScript code for a next button which when clicked will show the next image in my array. However I now want to reverse this by creating a new function for a "Previous" button which goes back down the array rather than forward. This will be much more images than just the 3 example ones you see in this Array:

var imgArray = new Array();

imgArray[0] = new Image();
imgArray[0].src = "Media//Gallery//img_1.jpg";

imgArray[1] = new Image();
imgArray[1].src = "Media//Gallery//img_2.jpg";

imgArray[2] = new Image();
imgArray[2].src = "Media//Gallery//img_3.jpg";

This is my Next buttons function. I just need to reverse it for the Previous button but not sure how.

function nextImage(event) {
    var img = document.getElementById("largeImage");

    for(var i = 0; i < imgArray.length;i++)
    {
        if(imgArray[i].src == img.src)
        {
            if(i === imgArray.length){
                img.src = imgArray[0].src;
                break;
            }
            img.src = imgArray[i+1].src;
            break;
        }
    }
}

This is the div for the previous button:

<div class="imgNav" onclick="previousImage(this);" style="width:190px">

This is the image which I want to change when you press the button:

<img id="largeImage" src="Media//Gallery//Image_1.jpg" alt="Large Image" />

Thank you so vety much in advance!

1 Answer 1

0

This should do it

JavaScript

    currentIndex = 0;

    function changeImage(direction)
    {
        var index = currentIndex + direction;

       if (index < 0)
       {
           index = 0; // or use imgArray.length to rotate round
       }

       if (index > imgArray.length)
       {
           index = imgArray.length; // or use 0 to rotate round
       }

       document.getElementById('largeImage').src = imgArray[index].src;
       currentIndex = index;
    }

Html Code

<div class="imgNav" onclick="changeImage(-1)" style="width:190px">

<div class="OtherimgNav" onclick="changeImage(1)" style="width:190px">
6
  • Hmm that definitely looks simpler but I cannot seem to get it to work. Will keep trying
    – Mayron
    May 31, 2013 at 9:51
  • sorry I left a line in which used jQuery use the updated code :) May 31, 2013 at 11:08
  • Still can't this to work. The original code which I linked works but only for swapping to the next array value. Is there anyone I can use that code instead but just reverse it to do the opposite?
    – Mayron
    May 31, 2013 at 11:42
  • When I press any of the buttons that use the function, it just shows an empty image frame rather than the next one in the array :/
    – Mayron
    May 31, 2013 at 11:44
  • I had a bug in the code it wasn't getting the .src of the loaded image it should now work. When you post questions to do with java script btw or html make a jsFiddle it is quicker to provide a fix. I coded that off the top of my head hence the glitches :) May 31, 2013 at 13:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.