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.

[remenissions]

Are you using ajax to make the request? If not it sounds like what you're doing works fine, I'm no expert but here's how I'd do it... If you are using ajax you could write a special callBack function to parse the request to store the links back into an array. Does that help any??? Could even mess around with the javascript some to make transition effects

 

 

    echo "<script type='text/javascript'>        
         var img_Url = new Array();";
    //connect to Db here.
     $links = mysql_query("SELECT links FROM Photos ORDER BY Id LIMIT 100");
    $ctr = 0;
    while($src = mysql_fetch_array($links)) {
        echo "image_Url[$ctr] = '{$src['links']}';";
        $ctr++;
    }
    //close connection
    echo "</script>";
    <style type='text/css'>
        #box {
            position: fixed;
            width: 100%;
            height: 100%;
            z-index: -1;
        }
        #box img {
            width: 100%;
            height: 100%;
        }
    </style>
    <script type='text/javascript'>
        setInterval(function(){
            document.getElementById('box').getElementsByTagName('img')[0].src = img_url[Math.floor((Math.random()*100)+1)];
        }, 10000); // 10 seconds
    </script>

Edited April 5, 2013 by remenissions

[Barand]

DON'T double post  - it wastes our time

[BorysSokolov]

DON'T double post  - it wastes our time

 

I didn't mean to, my computer lagged. I apologize.