0

I'm doing this in Wordpress using Sage theme. I want to display different images from a collection I provide to be displayed only once without repeating. I tried to do a simple JS one but it didn't work, it works when I try it as images not gif format. Below is my code, also one more thing right now I am hosting images somewhere and it would be really nice if I can use assets/images instead

var images = [
      'https://gifyu.com/image/IwmR',
      'https://gifyu.com/image/Iwmj',
      'https://gifyu.com/image/Iwm0',
      'https://gifyu.com/image/Iwm6',
      'https://gifyu.com/image/Iwmi',
      'https://gifyu.com/image/IwmC',
    ]

    function randImg() {
      var size = images.length
      var x = Math.floor(size * Math.random())
      document.getElementById('animateImage').src = images[x];
    }
    randImg()

HTMl part

    <div class="container">
      <div class="row">
        <div class="col-6">
          <div class="card my-5 mx-5" style="width: 25rem;">
            <img class="card-img-top" src= "" id="animateImage" alt=""></img>
            <div class="card-body">
              <h5 class="card-title text-center" id="title"></h5>
              <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>

            </div>
          </div>
        </div>
      </div>
    </div>
Ayman A.
  • 1
  • check this one https://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array, shuffle your array. And go through it once. If you want to loop through the array infinitely with different order again, just reshuffle – Yunhai Mar 03 '20 at 15:51
  • The code posted above still doesn't actually work. If you try it on Codepen you won't get any output of the images – Ayman A. Mar 03 '20 at 15:56
  • The URLs in the list are not the URLs of the images, they're URLs of the pages showing the images. You can find the image address when [navigating to the URL](https://gifyu.com/image/IwmC). – Teemu Mar 03 '20 at 16:00
  • You'll just want to write JavaScript which creates `` objects at random positions on the screen. You should also set the "z-index" of each object, which determines their back-to-front arrangement. Each `` object will then fetch its own content from the server, asynchronously. – Mike Robinson Mar 03 '20 at 16:02

0 Answers0