Random img block feat. Max

Random img block feat. Max

by JohannesDeml

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<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 image-front" 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 image-front"...

SCSS

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

JavaScript

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

	function getRandomFromPool() {
  	var randomId = Math.floor(Math.random() * unused_images + 1);
    var src = unused_images.pop(randomId);
    used_images.push(src);
    return src;
  }

  function initArray() {
    $(".img-bank img").each(function() {
      unused_images.push($(this).attr("src"));
    });
    
    $(".image-front").each(function() {
    	var randomSrc = getRandomFromPool();
      $(this).attr("src", randomSrc);
    });
  }

  initArray();
  
  function changeSrc() {
    var cells = $(".galery .col-4");
    
    var randomId = (Math.floor(Math.random() * cells.length));
    var newsrc = getRandomFromPool();
    
    var cell = cells.eq(randomId);
    cell.find("img:visible").each(function(index) {
      unused_images.push($(this).attr("src"));   
    });
    cell.find("img:hidden").each(function(index) {
      $(this).attr("src", newsrc);   
    });
    cell.find("img").fadeToggle(1500);
  }  
  
  setInterval(function() {
    changeSrc();
  }, 2000);
  
});