Using jQuery to Swap Out Body Background Image on click and randomize on load

I've got a body background image that is being "placed" by a plugin called ezBigResize that basically allows the image to scale with the browser window.

The designer wants to image though to be able to be swapped out by a series of thumbnails on the page, along with that image being randomized on page load from that series of images.

Initially before those two additions, I just had it setup like this:

$(document).ready(function() {$("body").ezBgResize({img : "/lib/img/bkgr/mainBG.jpg"});});

Then this is the code now (in a jQuery Tools scrollable)

<div id="bkgrSelector">
    <div class="scrollNav">
        <a class="prev browse left"></a>
    </div>
    <div class="scrollable">   
        <div class="items">
            <img src="/lib/img/bkgr/selections/main-bg.jpg" width="77" height="44" />
            <img src="/lib/img/bkgr/selections/mai开发者_运维问答n-bg02.jpg" width="77" height="44" />
            <img src="/lib/img/bkgr/selections/main-bg03.jpg" width="77" height="44" />
        </div>
    </div>
    <div class="scrollNav">
        <a class="next browse right"></a>
    </div>
</div>

I'm a little over my head though to allow these to both randomize on page load and to swap out the image via the value in the href.

I tried something like this, but it didn't work and is obviously inclomplete. Plus, it doesn't address the randomization at all.

$('#bkgrSelector .items img[href]').click(function()
{
            $("body").css("background-image", "url()");
        });

Any ideas, help, etc. would be appreciated.

---

Are those <img> pointing at the full-sized image file? I absolutely LOATHE sites that use full-size images and shrink them to thumbnail size. The load times are attrocious.

If they're actually thumbnail-sized images, you won't be able to use that url directly as your background url, as you'd just be stretching a small thumbnail-sized image to cover the window and get a hideous pixelized mess.

If the page is being dynamically generated, you'd want to create a JS array that contains the URLs of the full-sized image urls, so that when a thumbnail is clicked, you can get the fullsize url from that array. Or at least have a standardized naming convention so a simple string manipulation lets you turn the thumbnail url into a fullsize image url.

Once you've got that array, it's a simple matter to randomize a choice from it:

var imgs = ['/url/for/img1.jpg', '/url/for/img2.jpg', etc....];

$(document).ready(function() {
   randomUrl = imgs[Math.round(Math.random() * (imgs.length - 1)) + 1];
   $("body").css("background-image", 'url(' + randomURL + ')');
});