Change background-image dynamically every second

Question

I use the following code to add dynamically HTML string to a div element. I would like to change the image every second after added HTML to the DOM. But my code doesn't work. Where is my mistake?

var images = ["http://pathToImg1.jpg", "http://pathToImg2.jpg"];

    var result =   '<div class="result">'+
                      '<a href="'+url+'" target="_blank" id="resultTitle" class="resultTitle">'+urlTitle+'</a>'+
                      '<p id="resultDescription" style="height: 15px;">'+
                      '<div class="resultImg" style="background-image: url('+images[0]+');"></div>'+
                      '<span class="resultDescription" style="margin:0px 15px 0px 0;">'+description+'</span></p>'+
                      '<p id="resultUrl" class="resultUrl">'+url+'</p>'+
                   '</div>';

    $("#"+targetId).append(result);

    var i = 0;
    setInterval(function() {
          var el = $(result).find(".resultImg");
          $(el).css('background-image', 'url("' + images[i] + '")');
          i = i + 1;
          if (i == images.length) {
            i =  0;
          }
    }, 1000);

you should update i variable before setting the background also try to change $(result).find(".resultImg") with $("#"+targetId).find(".resultImg") — Toni Michel Caubet
– Toni Michel Caubet, Commented Jan 12, 2017 at 10:33
Where you have defined url, urlTitle and description variables that you are using in your template? — Mohammad Usman
– Mohammad Usman, Commented Jan 12, 2017 at 10:41

Sergei Klykov · Accepted Answer · 2017-01-12 14:14:48Z

1

you've got an error there:

var el = $(result).find(".resultImg");

selecting a string contained in a result variable will give you no effect, so you need to select element from it's parent which you used for attaching result to.

this line need to be changed like this:

var el = $("#"+targetId).find(".resultImg");

answered Jan 12, 2017 at 14:14

Sergei Klykov

1,0376 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

rachmatsasongko · Accepted Answer · 2017-01-12 10:51:15Z

The problem is with var el = $(result).find(".resultImg");

result dont have context as document, it should be var el = $("#"+targetId).find(".resultImg");

I replace the image from your code as color and use "#"+targetId as #test just to show you its working

var images = ["blue", "red"];

    var result =   '<div class="result">'+
                      '<a href="" target="_blank" id="resultTitle" class="resultTitle">Result</a>'+
                      '<p id="resultDescription" style="height: 15px;">'+
                      '<div class="resultImg" style="background-color: '+images[1]+';">resultImg</div>'+
                      '<span class="resultDescription" style="margin:0px 15px 0px 0;">description</span></p>'+
                      '<p id="resultUrl" class="resultUrl">url</p>'+
                   '</div>';

    $("#test").append(result);

    var i = 0;
    
    setInterval(function() {
          var el = $("#test").find(".resultImg");
          el.css('background-color', images[i]);
          i = i + 1;
          if (i == images.length) {
            i =  0;
          }
    }, 1000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test"></div>

ab29007 · Accepted Answer · 2017-01-12 10:56:43Z

The $(result).find(".resultImg"); will not return an element. because result is a class. You have to replace it with $(".result").find(".resultImg");

Below is a working snippet.

var images = ["http://images.financialexpress.com/2015/12/Lead-image.jpg", "http://www.chinabuddhismencyclopedia.com/en/images/thumb/b/b8/Nature.jpg/240px-Nature.jpg","https://static.pexels.com/photos/50704/car-race-ferrari-racing-car-pirelli-50704.jpeg"];
 var targetId = "example";

    var result =   '<div class="result">'+
                      '<a href="#" target="_blank" id="resultTitle" class="resultTitle">urlTitle</a>'+
                      '<div class="resultImg" style="background-image: url('+images[0]+');"></div>'+
                      '<span class="resultDescription" style="margin:0px 15px 0px 0;">description</span></p>'+
                   '</div>';

    $("#"+targetId).append(result);

    var i = 0;
    setInterval(function() {
      var el = $(".result").find(".resultImg");
          $(el).css('background-image', 'url("' + images[i] + '")');
          i = i + 1;
          if (i == images.length) {
            i =  0;
          }
    }, 1000);

#example{
  width:250px;
  height:200px;
  border:1px solid red;
}
.resultImg{
  width:150px;
  height:100px;
  border:1px solid green;
  background-position:center;
  background-size:cover;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="example"></div>

Tobias Glaus · Accepted Answer · 2017-01-12 11:48:44Z

0

Try this:

var images = [];
images[0] = "url of your first image";
images[1] = "url of your second image";
images[2] = "url of your third image";
images[3] = "url of your fourth image";
images[4] = "url of your fifth image";
images[5] = "url of your sixth image";

var i = 0;
setInterval(fadeDivs, 1000);

function fadeDivs() {
    i = i < images.length ? i : 0;
    console.log(i)
    $('.product img').fadeOut(100, function(){
        $(this).attr('src', images[i]).fadeIn(100);
    })
    i++;
}

You can change the fadeIn and fadeOut time manually. And set the time when the image should change. I set it to 1 second (1000 milliseconds) now.

answered Jan 12, 2017 at 11:48

Tobias Glaus

3,7083 gold badges22 silver badges41 bronze badges

Collectives™ on Stack Overflow

Change background-image dynamically every second

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related