CODEWITHSUNDEEP
javascriptphpjqueryhtmlcss
Krijn
Krijn

Reputation: 3

Jquery PHP refresh background image every 10 seconds

I'm working on a webpage for my hobby radio station. I'm already showing which artist and title is playing. But now i'd like to see that the background is changing with the artist. So when Phil Collins is playing i'd liked to see a image of Phil COllins on my background.

I've already figured out how i can load an background-image with JQuery:

$(".container").css("background-image", "url('images/bg/artist/<?php echo $newartist; ?>.jpg')");

But i can't figure out how i can show the background on page load and refresh it every 10 seconds.

Hopefully someone can help me.

Thanks in advance!

Krijn

Upvotes: 0

Views: 674

Answers (3)

Faisal Ijaz
Faisal Ijaz

Reputation: 1892

You can use 

setTimeout(function(){ alert("Hello"); }, 10000);

See Demo Here:

Upvotes: 0

Pevara
Pevara

Reputation: 14310

First off all I noticed you are using php in that js snippet to get the artist printed in there. Not sure if setting it trough js is realy the best option for the initial image, as it will have to wait until that javascript is executed. You could just as well set it on the container directly:

<div 
    class='container' 
    style='background-image: url('images/bg/artist/<?= $newartist; ?>.jpg')'
> 
    ... 
</div>

Now to update that image, you'll need to fetch the current artist trough ajax. So you'll need some simple php script that can return the current artist. You could then call that script like so:

function updateArtist() {
    $.ajax({
        method: 'GET',
        url: 'current_artist.php', 
        success: function(newArtist) {
            $(".container").css("background-image", "url('images/bg/artist/" + newArtist + ".jpg')");
        }
    });
}

And to automatically do this every 10 seconds, you could call it on an interval:

setInterval(updateArtist, 10000);

Just some pseudo code from the top of my head, but it should point you in the right direction. Feel free to ask if anything is unclear.

Upvotes: 0

Peter Schl&#246;nzke
Peter Schl&#246;nzke

Reputation: 11

You could try setInterval(function(){ alert("Hello"); }, 3000);

http://www.w3schools.com/jsref/met_win_setinterval.asp

Upvotes: 1

Related Questions