jQuery swap Next/Previous image, images in array

Question

I have a literal array of image IDs and I need to swap them in <img src=""> to Next or Previous image on buttons click events. The initial current image ID is known from the img src provided server-side on initial page load.

Obviously, before swapping, the URL needs to be constructed with the target ID like this:

'http://site.com/images/' + imageID + '.jpg'

I'm a JS/jQuery beginner and would like to learn a correct, minimalistic approach. TIA.

My code to start off:

var images=["777777","666666","555555"];
var max = $(images).length;

$('#swapnextimg').click{
   $("#imageswap").attr('src', ...... );
}

<a id="swapnextimg"></a>
<a id="swapprevsimg"></a>
<div id="imagebox">
    <img id="imageswap" src="http://site.com/images/123456.jpg">
</div>

Answer 1

Try below code,

var images=["777777","666666","555555"];
var max = $(images).length;
var imgPtr = 0;

$('#swapnextimg').click{

   if (imgPtr == max) {
       //comment the below return and set imgPtr to 0 for rotating the images
       return;
   }

   $("#imageswap").attr('src', 'http://site.com/images/' + images[imgPtr++] + '.jpg');
}

$('#swapprevsimg').click{

   if (imgPtr == 0) {
       //comment the below return and set imgPtr to max-1 for rotating the images
       return;
   }

   $("#imageswap").attr('src', 'http://site.com/images/' + images[imgPtr--] + '.jpg');
}

<a id="swapnextimg"></a>
<a id="swapprevsimg"></a>
<div id="imagebox">
    <img id="imageswap" src="http://site.com/images/123456.jpg">
</div>

Answer 2

I assume that you've got one img tag, and only one. And that the purpose of this is to change that single image tag.

To do that you will need the nex and prev button.

<div id="container">
    <img src="#" data-num="" />
    <span class"prev">prev</span>
    <span class"next">next</span>  
</div>

The object:

var obj = [0: 'dog', 1: 'cat'];

now for the next and prev to work. We are going to take a look at the .on() method.

$('.container span').on('click', function(){
    var $this = $(this), // span
        currentNum = $this.siblings('img').data('num'), // img data-num
        nextNum = $this.is('.next') ? currentNum+1 : currentNum-1, // if class is next add 1, if not remove 1
        link = "http://site.com/images/" + obj[nextNum] + ".jpg" // the link

    // either it's not the last images or it returns
    nextNum != obj.length() || return 

    $('img').attr('src', link).data('num', nextNum)

})

Hope this helped you. If not please let me know

Answer 3

Here is an example:

http://jsfiddle.net/ndFGL/

$(function() {
    // Image ID array
    var images = ['240', '260', '250', '123', '200'];
    var max = images.length;

    // Get current image src
    var curSrc = $('#imageswap').attr('src');

    // Find ID in image src
    var curID = curSrc.replace(/.*\/(.*?)\.jpg/i, '$1');

    var curIdx = 0;

    // Search image list for index of current ID
    while (curIdx < max) {
        if (images[curIdx] == curID) {
            break;
        }
        curIdx++;
    }

    // For convenience
    var imgSrcBase = 'http://placehold.it/';

    // Next image on button (and image) click
    $('#swapnextimg,#imageswap').click( function() {
        curIdx = (curIdx+1) % max;
        $("#imageswap").attr('src', imgSrcBase+images[curIdx]+'.jpg');
    });

    // Prev image on button click
    $('#swapprevsimg').click( function() {
        curIdx = (curIdx+max-1) % max;
        $("#imageswap").attr('src', imgSrcBase+images[curIdx]+'.jpg');
    });

});