CODEWITHSUNDEEP
javascriptjqueryhtml
Quantico
Quantico

Reputation: 2446

displaying images with different intervals

I am trying to display an array of images that will replace each other but will have 0.5 sec of black screen between them.

For example array_img = ["im1","im2","im3"] show im1 for 3 seconds, show a black screen for 0.5 sec, show im2 for 3 sec, black screen for 0.5 sec...

my code is images_array is a global variable. time_between_images = 3000 and is a global var time_for_black_screen = 500 and is a global var

function displayImages(){
    for (i = 0; i < images_array.length; i++) {
        console.log(images_array[i]);
        setTimeout(function () {
            console.log("1");
            $('#exprBody').css('background-color', 'white');
            $('#picture_frame').append(images_array[i]);
        }, time_between_images)


        setTimeout(function () {
            console.log("2");
            $("#picture_frame img:last-child").remove()
            $('#exprBody').css('background-color', 'black');
        }, time_for_black_screen)
    }
    console.log(images_array);

}

My html is simple

<body>
<div id="experiment_frame">
    <div id="header">
        <div id="left_cat"></div><div id="right_cat"></div>
    </div>
    <div id="picture_frame" class="centered">
        <div id="exp_instruct"></div>
    </div>
</div>
</body>

I thought I should use setTimeout because I want to switch between the two tasks for each image in the array. IMG + black screen, IMG + black screen but nothing is showing on my page.

The array

["<img src='/images/cute/1223.jpg'>", "<img src='/images/cute/1235.jpg'>", "<img src='/images/disgusted/8878.jpg'>", "<img src='/images/disgusted/8898.jpg'>", "<img src='/images/neutral/3321.png'>", "<img src='/images/neutral/3445.png'>"]

EDIT:

function displayImageIter(number) {
    $("body").toggleClass("whiteBody");
    $("#picture_frame").empty().append(images_array[number]);
    setTimeout(function () {
        $("#picture_frame").empty();
        $("body").toggleClass("blackBody");
        setTimeout(function () {
            displayImageIter((number + 1) % images_array.length);
        }, time_for_black_screen)
    }, time_between_images)
}

For some reason what I have with this code is IMG white background blank screen white for 0.5 sec IMG black background blank screen white for 0.5 sec

Upvotes: 2

Views: 203

Answers (2)

Kirill Simonov
Kirill Simonov

Reputation: 8481

Take a look at the following simplified code:

function displayImage(number) {
    $("#picture_frame").empty().append(images_array[number]).css('background-color', 'white');
    setTimeout(function () {
        $("#picture_frame").empty().css('background-color', 'black');
        setTimeout(function () {
            displayImage((number + 1) % images_array.length);
        }, time_for_black_screen)
    }, time_between_images)
}

const images_array = ["FIRST IMAGE", "SECOND IMAGE", "THIRD IMAGE"];
const time_between_images = 3000;
const time_for_black_screen = 500;

displayImage(0);
#picture_frame {width: 200px; height: 100px; background-color: white}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="picture_frame"></div>

Answering your comment:

a) To change the parent div background just use:

$("#picture_frame").empty().append(images_array[number]);
$("#parent_div").css('background-color', 'white');

b) To stop this loop you could use some flag and set it to false after 15 minutes:

function displayImage(number) {
    $("#picture_frame").empty().append(images_array[number]).css('background-color', 'white');
    setTimeout(function () {
        $("#picture_frame").empty().css('background-color', 'black');
        setTimeout(function () {
            //continue only if flag is true
            if (flag) displayImage((number + 1) % images_array.length);
        }, time_for_black_screen)
    }, time_between_images)
}

const images_array = ["FIRST IMAGE", "SECOND IMAGE", "THIRD IMAGE"];
const time_between_images = 3000;
const time_for_black_screen = 500;

let flag = true;

displayImage(0);

//used 15 seconds here for simplicity
setTimeout(() => flag = false, 15000);

Upvotes: 2

lies in april
lies in april

Reputation: 1

<a class="img0"></a>
<a class="img1"></a>
<a class="img2"></a>
<script>
  var elArr = [];
  // here get the els that you wanna to display img
  elArr.push(document.querySelector('.img0'));
  elArr.push(document.querySelector('.img1'));
  elArr.push(document.querySelector('.img2'));
  // here is the img src and it's interval
  var imgArr = [
    { src: 'a', interval: 3000 },
    { src: 'b', interval: 2000 },
    { src: 'c', interval: 1000 },
  ];
  //  if you wanna auto display unknown number imgs, set a variable to count the whole interval
  var sumInterval = 0;
  for (var i = 0; i < imgArr.length; i++) {
    // the first interval is 3000, second is 5000, third is 6000
    sumInterval += imgArr[i].interval;
    setTimeout(function () {
      elArr[i].innerHTML = imgArr[i].src;
      // if is the last img, set an interval and then do the callback
      if (i == imgArr.length - 1) {
        setTimeout(function () {
          alert('now screen shall be black');            
        }, 500)
      }
    }, sumInterval);
  }
</script>

Upvotes: 0

Related Questions