1

I've got a pretty specific question but it would be great if some of you can help me out. With a lot of help I was able to write a code which is able to change different GIFs randomly after they are played one time. This animation is happening to three different GIFs next to each other. The key to the change is a delay which is different for every GIF, depending on how long it is going. There's also a jquery transition animation between the change of GIFs.

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>GIF</title>
<link href="styles/styles.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-2.1.4.min.js" type="text/javascript"></script>
<script type="text/javascript">

function swapImages(container){
      var $active = $(container + ' .active');

      if($(container + ' .active').next().length > 0) {
        var $next = $(container + ' .active').next();
      } else {
        var $next = $(container + ' img:first');
      }

      /* FADE EFFECT */      
      $active.fadeOut(function(){
        $active.removeClass('active');
        $next.fadeIn().addClass('active');
      });

      /* WITHOUT FADE EFFECT */
      //$active.removeClass('active');
      //$next.addClass('active');

      console.log( $($active).attr("data-delay") );
    }


$(document).ready(function() { 
  setInterval('swapImages("#left")',    $('#left .active').attr("data-delay")   );
  setInterval('swapImages("#middle")',  $('#middle .active').attr("data-delay") );
  setInterval('swapImages("#right")',   $('#right .active').attr("data-delay")  );  
});
</script>
</head>

<body>
<div class="center">

  <div class="item top" id="left">
    <img id="wechsel1" src="bilder/1/1.gif" data-delay="3500" class="active" />
    <img id="wechsel1" src="bilder/1/2.gif" data-delay="1400" />
    <img id="wechsel1" src="bilder/1/3.gif" data-delay="4000" />
  </div>

  <div class="item" id="middle">
    <img id="wechsel2" src="bilder/2/1.gif" data-delay="1800" class="active" />
    <img id="wechsel2" src="bilder/2/2.gif" data-delay="1800" />
    <img id="wechsel2" src="bilder/2/3.gif" data-delay="1800" />
  </div>

  <div class="item bottom" id="right">
    <img id="wechsel3" src="bilder/3/1.gif" data-delay="4300" class="active" />
    <img id="wechsel3" src="bilder/3/2.gif" data-delay="3100" />
    <img id="wechsel3" src="bilder/3/3.gif" data-delay="4100" />
  </div>

</div>
</body>
</html>

CSS

body {
    background-color:black;
}

.center {
  padding-top: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.item {
  width: 568px;
  height: 800px;
  max-width: 50%;
  margin-left: 10px;
  margin-right: 10px;
}

.top {
  width: 568px;
  height: 800px;
  align-self: flex-start;
}

.bottom {
  width: 568px;
  height: 800px;
  align-self: flex-end;
}

img {
  display: none;
  width: 100%; 
}
img.active {
  display:block;  
}

Now there is only one problem left. Every once in a while (like every 5 minutes or so) three specific GIFs should be played next to each other. After that is over, everything should keep going like before (random GIFs playing).

I heard this should be possible through an overlay, or are there better alternatives? Can somebody please show me how this can be done if it's possible? I'm not that good in JS and I need a solution pretty soon...

Manuel Bug
  • 43
  • 4

0 Answers0