Change Multiple Image Sources from Array

Question

I am creating an image gallery where a user can click "next" and the images will update with the next images. All of the images should update to different images than were currently displayed.

For example once the next button is clicked:

Image01 --> Image04

Image02 --> Image05

Image03 --> Image06

JSFiddle

HTML:

 <div class="socialItem">
     <img class="socialImage" src="http://placehold.it/240.jpg" width="290" height="250" alt="" />
 </div>
 <div class="socialItem">
     <img class="socialImage" src="http://placehold.it/250.jpg" width="290" height="250" alt="" />
 </div>
 <div class="socialItem">
     <img class="socialImage" src="http://placehold.it/260.jpg" width="290" height="250" alt="" />
 </div>
 <a id="swapnextimg">Next</a>

JQuery:

$(function() {

    var images = ['240', '250', '260', '123', '200'];
    var max = images.length;
    $('#swapnextimg').click( function() {
        $(".socialImage").each(function(index) {
            console.log( index + ": " + $( this ).attr('src') );
            // Get current image src
            var curSrc = $(this).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

            curIdx = (curIdx+1) % max;
            $(this).attr('src', imgSrcBase+images[curIdx]+'.jpg');
        });
    });
});

This code is adapted partially from this answer.

I am attempting to use .each to incrementally replace the sources of each image individually that has the socialImage class. However it is instead replacing all of the images with that class at once.

What do you think is the value of curID when you are using /.*\/(.*?)\.jpg/i on http://placehold.it/50/? ;) — Sebastian Nette
– Sebastian Nette, Commented Jul 8, 2015 at 18:36

Sebastian Nette · Accepted Answer · 2015-07-08 18:54:57Z

1

Well, you can skip quite a lot of your code here.

$(function() {

    var images = ['240', '250', '260', '123', '200'];
    var max = images.length;
    var curIdx = -1;
    $('#swapnextimg').click( function() {
        $(".socialImage").each(function(index) {
            if(curIdx === -1) {
                var curId = $(this).attr('src').replace(/.*\/(.*?)\.jpg/i, '$1');
                curIdx = images.indexOf(curId);
            }

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

            // Next image on button (and image) click

            curIdx = (curIdx+1) % max;
            $(this).attr('src', imgSrcBase+images[curIdx]+'.jpg');
        });
    });
});

On the first click, you look up the index of the first image. After that you just keep incrementing the index by 1.

answered Jul 8, 2015 at 18:54

Sebastian Nette

7,9022 gold badges20 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Change Multiple Image Sources from Array

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related