John Davidson

Message:

This is a continuation of a post which I could not get an answer that works so I here I go again.

I am trying to display images using data returned by a mySQL query. The query returns the names of an image files and a timelapse which is a number (seconds). I need to display each image for the number of seconds returned in TimeLapse.

With help from my first post I am able to display images that are static but not from the result of the query.

The static method works and displays all the images one after the other

<div class="outer">

  <div class="banner-container" data-delay-time="1000"><img src="/<?=$ImagePath?>doubletreelandscapeoverridedemo.png" class="responsive"/></div>

  <div class="banner-container" data-delay-time="2000"><img src="/<?=$ImagePath?>covidtest.png" class="responsive"/></div>

  <div class="banner-container" data-delay-time="6000"><img src="/<?=$ImagePath?>gilhrsignagedemol.png" class="responsive"/></div>

</div>

Using the query result displays only the first image

<?php while($row = $fb->fetch_array()): ?>

  <div class="outer">

    <div class="banner-container" data-delay-time="<?=$row['TimeLapse']?>">

      <div id="wrapper">

        <a>

          <img src="/<?=$ImagePath . $row['SignageImageName']?>" class="responsive"/>

        </a>

      </div>

    </div>

  </div>

<?php endwhile ?>

(function() {

  $("div.outer div.banner-container").hide();

  run();



  function run() {

    // get a list of all the banners

    var banners = $("div.outer div.banner-container");

    if (!banners.length) {

      return;

    }

    // active is the one with "active" class, or the first one

    var active = banners.filter(".active").first();

    if (!active.length) {

      active = banners.first();

    }

    // get the next one or loop to the beginning again

    var next = active.next("div.banner-container");

    if (!next.length) {

      next = banners.first();

    }

    active.fadeOut(500).removeClass("active");

    next.fadeIn(500).addClass("active");

    // get the delay time from the data-delay-time attribute

    setTimeout(run, next.data("delayTime"));

  }

})();

Can anyone see where I am going wrong.

---

My Answer:
It looks like the issue might be with how you are setting the data-delay-time attribute in your PHP loop. In your static method, you are hardcoding the delay times for each image, but in your PHP loop, you are setting the delay time dynamically from the query result.

Make sure that the data-delay-time attribute is being set correctly in your PHP loop. It should be set as data-delay-time instead of data-delayTime in your jQuery script.

Here is an updated version of your PHP loop:

php
fetch_array()): ?>

And in your jQuery script, make sure to change data("delayTime") to data("delay-time"):

javascript
(function() {
$("div.outer div.banner-container").hide();
run();

function run() {
var banners = $("div.outer div.banner-container");
if (!banners.length) {
return;
}
var active = banners.filter(".active").first();
if (!active.length) {
active = banners.first();
}
var next = active.next("div.banner-container");
if (!next.length) {
next = banners.first();
}
active.fadeOut(500).removeClass("active");
next.fadeIn(500).addClass("active");
setTimeout(run, next.data("delay-time"));
}
})();


By making these changes, the images should now display one after the other based on the delay times returned from your query.