CODEWITHSUNDEEP
javascriptjqueryhtmlcss
wawanopoulos
wawanopoulos

Reputation: 9794

Change background-image dynamically every second

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);

Upvotes: 0

Views: 670

Answers (4)

Sergei Klykov
Sergei Klykov

Reputation: 1037

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");

Upvotes: 1

Tobias Glaus
Tobias Glaus

Reputation: 3628

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.

Upvotes: 0

ab29007
ab29007

Reputation: 7766

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>

Upvotes: 0

rachmatsasongko
rachmatsasongko

Reputation: 186

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>

Upvotes: 0

Related Questions