Jump to content

Update Background To Random Image Every Few Seconds?


BorysSokolov
 Share

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.

 

Thanks.

Link to comment
Share on other sites

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 by remenissions
Link to comment
Share on other sites

This thread is more than a year old.

Join the conversation

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

Guest
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.

 Share

×
×
  • 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.