CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Binit Singh
Binit Singh

Reputation: 983

How to iteratively change div background image using image paths stored in an array?

I have a index.html where headerwrap div's css property is defined in css file which is included in index.html

HTML

<div id="headerwrap">
    <div class="container">
        <div class="row">
            ....
        </div>
    </div>
</div>

CSS

#headerwrap {
background: url(../img/portfolio/img1.jpg) center top;
margin: 0;
height: 100%;
margin-top: 0px;
padding-top:120px;
text-align:center;
background-attachment: relative;
background-position: center center;

width: 100%;
bottom: 10px;

}

I have written a js function change_image to change image of div headerwrap 

var image_array= ['url("../img/portfolio/img2.jpg")', 'url("../img/portfolio/img3.jpg")', 'url("../img/portfolio/img4.jpg")'];
var image_index = 0;

var change_image = function(){

    $('#headerwrap').css("background", image_array[image_index]);  
    image_index++;
    if (image_index >= image_array.length){
        image_index = 0;
    }
}

$(document).ready( function(){

    setInterval(change_image, 5000);

 });

change_image function is getting called after every 5 sec as when i see the div with firebug it looks like this

<div id="headerwrap" style="background: url("../img/portfolio/img3.jpg") repeat scroll 0% 0% transparent;">
    <div class="container">
        <div class="row">
            ....
        </div>
    </div>
</div>

After 5 sec div background is white and i cant see the 1st image. What changes i need to do so that i can see image rotation

Upvotes: 0

Views: 735

Answers (5)

Magicianred
Magicianred

Reputation: 566

In my experience, this don't work. Use some class style and in js change class style.

CSS: #headerwrap { margin: 0; height: 100%; margin-top: 0px; padding-top:120px; text-align:center; background-attachment: relative; background-position: center center;

width: 100%;
bottom: 10px;

}
.background1 {
background-image: url(../img/portfolio/img1.jpg);
}
.background2 {
background-image: url(../img/portfolio/img2.jpg);
}

JS:

var class_array= ['background1', 'background2'];
var image_index = 0;

var change_image = function(){
$('#headerwrap').removeClass(class_array.join(' '));
    $('#headerwrap').addClass(image_array[image_index]);  
    image_index++;
    if (image_index >= image_array.length){
        image_index = 0;
    }
}

$(document).ready( function(){

    setInterval(change_image, 5000);

});

Enjoy your code.

Upvotes: 0

Niklas
Niklas

Reputation: 1777

Try this:

CSS

#headerwrap {
background-image: url(/img/portfolio/img1.jpg);
margin: 0;
height: 100%;
margin-top: 0px;
padding-top:120px;
text-align:center;
background-attachment: relative;
background-position: center center;

width: 100%;
bottom: 10px;
}

jQuery

var image_array= ['url(/img/portfolio/img2.jpg)', 'url(/img/portfolio/img3.jpg)', 'url("../img/portfolio/img4.jpg")'];
var image_index = 0;

var change_image = function(){

    $('#headerwrap').css("background-image", image_array[image_index]);  
    image_index++;
    if (image_index >= image_array.length){
        image_index = 0;
    }
}

$(document).ready( function(){

    setInterval(change_image, 5000);

});

EDIT Changed the image urls to absolute instead of relative for consistency.

Upvotes: 0

Shaunak D
Shaunak D

Reputation: 20626

The correct syntax for changing background image is as below:

$('#element').css("background-image", "url(/myimage.jpg)");

Use:

$('#headerwrap').css("background-image", image_array[image_index]);

Image array should have : url(/path) and not url('/path')

var image_array= ['url(./img/portfolio/img3.jpg)', 'url(./img/portfolio/img2.jpg)', 'url(./img/portfolio/img4.jpg)'];

Upvotes: 0

kkontagion
kkontagion

Reputation: 516

you're using the wrong quotes -

style="background: url("../img/portfolio/img3.jpg")

the style attribute is now just "background: url(" so it isn't loading.

the elements in your image_array in the js should use these quotes.

"url('../img/portfolio/img2.jpg')"

Upvotes: 0

Adam
Adam

Reputation: 6733

I think you need to put the full URL (or relative to the page or site) in the the image_array. When you use a relative url for a background image (url('../foo.png')) in a CSS file the ../ is relative to the CSS file. However, when you set with javascript it is relative to the current page URL.

Upvotes: 1

Related Questions