Crossfade a 6 images grid randomly, one by one

Question

I've been trying since yesterday to do something a bit tricky (I guess).

I'm trying to do exactly what happens here: https://tympanus.net/Development/AnimatedResponsiveImageGrid/index2.html but this script is 8 years old and can't work with newer jQuery, anyway I wanted to redo it by myself.

What I need (well, what the marketing want me to do): Having a 6 images grid which randomly crossfade to another image, but one by one. They should never repeat themselves.

So far I've done this, but all the crossfade are made 6 by 6. I want to do it, one by one, in a random order.

HTML

<div class="img-bank">
  <img style="display:none" src="https://picsum.photos/210?image=0" />
  <img style="display:none" src="https://picsum.photos/210?image=11" />
  <img style="display:none" src="https://picsum.photos/210?image=21" />
  <img style="display:none" src="https://picsum.photos/210?image=31" />
  <img style="display:none" src="https://picsum.photos/210?image=41" />
  <img style="display:none" src="https://picsum.photos/210?image=51" />
  <img style="display:none" src="https://picsum.photos/210?image=61" />
  <img style="display:none" src="https://picsum.photos/210?image=71" />
  <img style="display:none" src="https://picsum.photos/210?image=81" />
  <img style="display:none" src="https://picsum.photos/210?image=91" />
  <img style="display:none" src="https://picsum.photos/210?image=101" />
  <img style="display:none" src="https://picsum.photos/210?image=111" />
  <img style="display:none" src="https://picsum.photos/210?image=121" />
  <img style="display:none" src="https://picsum.photos/210?image=131" />
  <img style="display:none" src="https://picsum.photos/210?image=141" />
  <img style="display:none" src="https://picsum.photos/210?image=151" />
  <img style="display:none" src="https://picsum.photos/210?image=161" />
  <img style="display:none" src="https://picsum.photos/210?image=171" />
  <img style="display:none" src="https://picsum.photos/210?image=181" />
  <img style="display:none" src="https://picsum.photos/210?image=191" />
</div>

<div class="container galery">
  <div class="row">
    <div class="col-4">
      <img class="img-fluid" src="https://placekitten.com/210/210?image=1" />
      <img style="display:none;" class="img-fluid" src="" />
    </div>
    <div class="col-4">
      <img class="img-fluid" src="https://placekitten.com/210/210?image=2" />
      <img style="display:none;" class="img-fluid" src="" />
    </div>
    <div class="col-4">
      <img class="img-fluid" src="https://placekitten.com/210/210?image=3" />
      <img style="display:none;" class="img-fluid" src="" />
    </div>
    <div class="col-4">
      <img class="img-fluid" src="https://placekitten.com/210/210?image=4" />
      <img style="display:none;" class="img-fluid" src="" />
    </div>
    <div class="col-4">
      <img class="img-fluid" src="https://placekitten.com/210/210?image=5" />
      <img style="display:none;" class="img-fluid" src="" />
    </div>
    <div class="col-4">
      <img class="img-fluid" src="https://placekitten.com/210/210?image=6" />
      <img style="display:none;" class="img-fluid" src="" />
    </div>     
  </div>
</div>

JS

$( document ).ready(function() {
  var ids = [];

  function initArray() {
    $(".img-bank img").each(function() {
      ids.push($(this).attr("src"));
    })    
  }

  function randomArray() {
    // copie du tableau d'ids car il va etre modifié
    var tempIds = ids.slice();
    // init du tableau de resultat
    var myIds = [];
    for (var i = 0; i < 6; i++) {
      // Recupere un int random
      var randomId = (Math.floor(Math.random() * tempIds.length) + 1);
      // Recupere la valeur random
      var myId = tempIds[randomId - 1];
      // Ajout de la valeur random au tableau de resultat
      myIds.push(myId);
      // Recupere l'index de la valeur random pour la suppression
      var pos = tempIds.indexOf(myId);
      // Suppression de la valeur choisie pour eviter de retomber dessus
      tempIds.splice(pos, 1);
    }
    return myIds;
  }

  initArray();
  
  function changeSrc() {
    var result = randomArray();
    $(".galery img:hidden").each(function(index) {
      $(this).attr("src", result[index]);   
    });
    $(".galery img").fadeToggle(1500);
  }  
  
  setInterval(function() {
    changeSrc();
  }, 2000);
  
});

LESS

.galery {
  margin-top: 30px;
  .row > div {
    position:relative;
    height: 240px;
    width: 240px;
    img {
      position: absolute;
      top: 0;
      left: 15;
    }    
  }  
}

https://jsfiddle.net/N_3G/ju0comn2/

Can someone help me with this please?

Answer 1

You can select a cell col-4 at random, then apply the logic to only the 2x img in that cell.

Without changing too much of your existing code, change to:

var cells = $(".galery .col-4");
var randomId = (Math.floor(Math.random() * cells.length));
var cell = cells.eq(randomId);
cell.find("img:hidden").each(function(index) {
  $(this).attr("src", result[index]);   
});
cell.find("img").fadeToggle(1500);

Updated fiddle: https://jsfiddle.net/ju0comn2/1/

Due to the nature of Math.random() you will notice it runs the same images in the same order - seed the random. You'll also get the same image replacing with the same image.

---

For a rudimentary fix for duplicated images, check if any of the visible images have the same src as the new src:

var result = randomArray();
var cells = $(".galery .col-4");    
var randomId = (Math.floor(Math.random() * cells.length));
var newsrc = result[0];

if ($(".galery img[src='" + newsrc + "']:visible").length > 0) {
   changeSrc();
}
else {
  var cell = cells.eq(randomId);
  cell.find("img:hidden").each(function(index) {
    $(this).attr("src", result[index]);   
  });
  cell.find("img").fadeToggle(1500);
}

This could be handled with a while loop to keep getting randomIds, but as long as you have more images than panels, the recursive call is unlikely to stack overflow.

Updated fiddle: https://jsfiddle.net/ju0comn2/2/

Answer 2