Looping through images in jQuery

Question

Sorry, but I am a newbie in programming jQuery. I have a page with some images and I simply want to circle them around.

I mean, I would like to move the first image in place of the second one, the second one in place of the third one and so on, till the last one which would be moved at the first place. This should happen everytime I hit a button.

In Javascript this is pretty straitforward, something like this for example:

V = document.getElementsByTagName("img");
K = V[V.length - 1].src
for (i = V.length - 1; i > 1; i--)
{
    V[i].src = V[i - 1].src;
}
v[0].src = K;

Now I'am trying to realize the same shift in jQuery and I wonder if there is some simple trick to use. Anyone can help me?

I don't think that jQuery is going to improve what you're already using — j08691, Nov 14 '16 at 17:40
I am not seeing your JS code is doing what you described you want to happen. For example you said `everytime I hit a button` but this code does not handle button clicks. — bhantol, Nov 14 '16 at 17:42
Other than `document.getElementsByTagName` being just `$("img").get()`, the rest of the code would probably be slightly longer. — freedomn-m, Nov 14 '16 at 17:42
Do you mean like a [carousel](http://stackoverflow.com/questions/20007610/bootstrap-3-carousel-multiple-frames-at-once)? — Sam W, Nov 14 '16 at 17:43

Tuvia · Answer 1 · 2016-11-14T17:52:35.863

1

Actually with plain javascript it is even easier than you wrote (no need for jquery, it adds a heavy load).

const images = document.getElementsByTagName("img");
let nextImageSrc = images[images.length - 1].src;

Array.from(images).forEach((img) => {
   const tmp = img.src;
   img.src = nextImageSrc;
   nextImageSrc = tmp;
});

If you do use jquery you can do the same thing:

const $images = $("img");
let nextImageSrc = $images.last().attr('src');

$images.each((i, img) => {
   const tmp = img.src;
   img.src = nextImageSrc;
   nextImageSrc = tmp;
});

edited Nov 14 '16 at 17:52

answered Nov 14 '16 at 17:47

Tuvia

859
4
15

Yep, it seems I have. One minute @canon I will try to fix :-) – Tuvia Nov 14 '16 at 17:51
2

Note if you're supporting IE the arrows and `from` isn't going to work, unless you're using a transpiler of course.. but I'm going to assume OP isn't – Loktar Nov 14 '16 at 17:52
@canon I fixed it :-) – Tuvia Nov 14 '16 at 17:52
@Loktar that is true. **Note** if your code does not use es6 you can just use regular function notation and `Array.splice` hack instead of `Array.from` – Tuvia Nov 14 '16 at 17:53
1

I would not put your non-jQuery version first. It is not what the question asks for. In addition, you went from the OP's solution which is faster, and compatible across most browsers (although lacking in good variable names) to a solution which is slower, and less compatible. The code might be useful placed after the jQuery for comparison to using jQuery. [Note: your jQuery will also be less compatible due to `=>`. You are using a 85KiB (minimized) library that is supposed to improve cross browser compatibility then made your code less compatible by using `=>`.] – Makyen Nov 14 '16 at 18:09

Erik Philips · Answer 2 · 2016-11-14T18:15:45.160

0

I personally wouldn't couple it so tightly to just img. You add another image to the page and get undesired results.

jQuery .each() documentation.

Untested, but something like this would work:

$(document).ready(function() {
  $('js-image-swap').on('click', function() {

    var $images = $('img.swap-image');

    var lastIndex = $images.length - 1;

    $images.each(function(index, $img) {
      if (index == lastIndex)
        $img.attr('src', $images.first().attr('src'));
      else
        $img.attr('src', $images.get(index +1).attr('src'));
    });
  });
});

Not exactly pretty..

edited Nov 14 '16 at 18:15

answered Nov 14 '16 at 17:45

Erik Philips

53,428
11
128
150

I tried your code but $img.attr('src', $images.get(index +1).attr('src')) is not working (Chrome debugger says it is not a function)... – Nov 15 '16 at 07:07

Looping through images in jQuery

2 Answers2