Jump to content

Update Background To Random Image Every Few Seconds?


Recommended Posts

I'm building a basic photo gallery, and I'm having difficulties with the 'Categories' section. The plan is to display all the picture categories inside divs, and have them 'rotate' their background images through the pictures in the given category. For instance, the 'Nature' category div would change its background every few seconds to a random image in the Nature category.


I've succeeded doing this, but the code wasn't very efficient. Basically, I've had a JavaScript file gather all the categories (through uniquely assigned IDs) and "$.post" them to a PHP file which polled images with the given category from a database, loaded them into an array and returned a random key. Then, using intervals it updated the background every couple of seconds.


But I'm looking for a better way to do it. I'd prefer to poll the database only once, at the start of the page, and then just let the JS file reload the rand() function each time the interval is called; but I'm not sure how to pass the polled data to the file that call the random function. Any ideas how to do this?


Obviously, I'm not expecting anybody to write the code for me, I just need some assistance. Also, sorry if all this is a little unclear, it's 4am here, and I'm falling asleep; if you need me to explain just let me know.



Link to comment
Share on other sites

This is a Javascript question and I hate Javascript and along with jQuery library!


Anyway, one solution is to return all your images from PHP in a json string then using interval switch the images based on the category. There is a rand work around which I've seen on StackOverflow




Then you'll be switching the images without polling PHP every nth interval. Just be carful with scope in JavaScript I'm not going to go into detail on that one because I'll be typing all night :)


Good luck

Edited by KevinM1
Link to comment
Share on other sites

This thread is more than a year old. Are you sure you have something important to add to it?

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.