Update Background To Random Image Every Few Seconds?

[BorysSokolov]

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.

 

Thanks.

[exeTrix]

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

 

items[Math.floor(Math.random()*items.length)]

 

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 April 5, 2013 by KevinM1
Maturity