Reload background-image from PHP file using jQuery

Question

I have a <body style="<?php include("gallery.php"); ?>" where gallery.php holds a random array of images, echoing the URL upon each reload.

I would like to have a button to refresh the background image of the body.

I currently am able to do one reload of the image, since the new URL is echoed.

EG:

$(".refresh").click(function() {
    $("body").css("background-image", "url(<?php include("gallery.php"); ?>)");
});

But after the inclusion of the gallery file in the script, it is always the same url.

EDIT My PHP is as follows:

$bg = array(
    array( "url" => "url_1" ),
    array( "url" => "url_2" ),
    ...
);


for ($i=0;$i<1;$i++) {
    $id = array_rand($bg);
    echo "{$bg[$id]['url']}";
    unset($ad[$id]);
};

What is the output of gallery.php? Also, try to get this in a Javascript array...so that you can just replace the values from the array...no need of ajax as well. — web-nomad
– web-nomad, Commented Jan 28, 2013 at 7:50

Omid · Accepted Answer · 2013-01-28 11:51:05Z

2

It would be in an another way and gallery.php could outputs an image (not just a url), So you can access gallery.php like this :

$(".refresh").click(function() { 
    $("body").css("background-image", 'url("http://www.mysite.com/gallery.php?'+Math.random()+'")'); 
});

Using Math.random() will passes a random number to avoid caching.

So in gallery.php you have something like :

$bg = array(
    array( "url" => "url_1" ),
    array( "url" => "url_2" ),
    ...
);

shuffle($bg); // Random order

echo file_get_contents($bg[0]['url']);
//instead of echo $url;

edited Jan 28, 2013 at 11:51

answered Jan 28, 2013 at 7:52

Omid

4,7259 gold badges48 silver badges78 bronze badges

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

7 Comments

Gerald Schneider Over a year ago

According to the question gallery.php only outputs an URL, not an image. This will not work.

Talha Akbar Over a year ago

@GeraldSchneider oh i didn't noticed it ;)

markb Over a year ago

@Omid How would I alter my PHP script? I currently have a loop that passes each url and outputs it

Omid Over a year ago

@Ahhhhhhhhhhhhhdfgbv Let me see, You have a set of images in your PHP file. Also have an index file that has some elements with background images. Each element should have a random background image from image set ?

markb Over a year ago

@Omid So I have the PHP file with the url of the images, and an index file with the call on the <body> to get the background image. I need a button to refresh the background image url without refreshing the page.

|

Talha Akbar · Accepted Answer · 2013-01-28 08:04:18Z

1

$(".refresh").click(function() { 
    $.get('gallery.php', function(data) {
        $("body").css("background-image", "url('"+data+"')"); 
    }
});

PHP is server side scripting language and Javascript is client side scripting language. We can't use them like you were using. But you can send request from client to server to faciliate body with URL.

edited Jan 28, 2013 at 8:04

answered Jan 28, 2013 at 7:52

Talha Akbar

10.1k7 gold badges42 silver badges62 bronze badges

1 Comment

markb Over a year ago

@AspiringAqib This works once, and then the refresh wont reload again

Gerald Schneider · Accepted Answer · 2013-01-28 08:20:31Z

0

IMO Ajax is overkill and piping all images through a php script creates unnecessary memory overhead. For very large images it could even create memory problems on your webserver. The best method would be to put all images in a javascript array, as already suggested. You can have gallery.php output an array of URLs to the images.

[ 'http://url1/', 'http://url2', ... ] // etc

Then you can call it in your file like this:

<script type="javascript">
  var backgroundImages = <?php include("gallery.php"); ?>;
  function refresh() {
    $("body").css("background-image", "url(" + backgroundImages[Math.round(Math.random() * backgroundImages.length)] + ")"); 
  }
  $(function() { refresh(); });
  $(".refresh").click(refresh);
</script>

edited Jan 28, 2013 at 8:20

answered Jan 28, 2013 at 8:15

Gerald Schneider

17.8k10 gold badges64 silver badges79 bronze badges

2 Comments

Omid Over a year ago

Commonly, When we use a php file want to add Expire headers and compressing images. Just selecting an image in random order would not be the matter.

markb Over a year ago

@GeraldSchneider Using the include("gallery.php") echoes out a URL. I've added my PHP to see where I can change it to make this work :]

Collectives™ on Stack Overflow

Reload background-image from PHP file using jQuery

3 Answers 3

7 Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related