jQuery background changer that's persistent across all pages?

Question

I'm trying to build a background changer for my site and it's working fine except the change is lost when you move to a different page.

I've tried a few ways to make the change stick when you change pages but no joy.

Here's the jQuery with a few test images:

$(function() {
$(".bgCollection").change(function() {
    if ($("#wood").is(":checked")) {
        $('#background img:first').attr('src', 'http://cdnimg.visualizeus.com/thumbs/7f/78/gfx,wood-7f78592c9a6ed3390492c560c5ac6fec_h.jpg');
    }
    if ($("#steel").is(":checked")) {
        $('#background img:first').attr('src', 'http://www.aroorsteelcorporation.com/full-images/stainless-steel-834007.jpg');
    }
    if ($("#metal").is(":checked")) {
        $('#background img:first').attr('src', 'http://i00.i.aliimg.com/photo/v0/468538622/Brushed_metal_texture_prepainted_metal.jpg');
    }
}); });

And here's the html:

<input name="BG" id="wood" type="radio" value="" class="bgCollection" />
<label for="radio">
  Wood
</label>
<input name="BG" id="steel" type="radio"  class="bgCollection"/>
<label for="radio">
  Steel
</label>
<input name="BG" id="metal" type="radio" value="" class="bgCollection"/>
<label for="radio">
  Black metal
</label>

I was trying passing the current src value to a variable and making the script set it on page load but couldn't get it to work.

Any help would be great. Thanks, Aaron.

Answer 1

You could set a cookie to track the change using the jquery-cookie script: https://github.com/carhartl/jquery-cookie

javascript:

$(function() {

    // get cookie
    var background = $.cookie('background');

    // update background
    changeBackground(background);

});

function saveBackground(background) {

    // set cookie
    $.cookie('background', background);

    // change background
    changeBackground(background);

}

// background changer
function changeBackground(background) {

    switch (background) {

        case "steel":
            $('#background img:first').attr('src', 'http://www.aroorsteelcorporation.com/full-images/stainless-steel-834007.jpg');
            break;

        case "metal":
            $('#background img:first').attr('src', 'http://i00.i.aliimg.com/photo/v0/468538622/Brushed_metal_texture_prepainted_metal.jpg');
            break;

        case "wood":
        default:
            $('#background img:first').attr('src', 'http://cdnimg.visualizeus.com/thumbs/7f/78/gfx,wood-7f78592c9a6ed3390492c560c5ac6fec_h.jpg');
            break;
    }
}

html:

<input id="wood" type="radio" value="" onclick="saveBackground('wood');" />
    <label for="radio">  Wood</label>

<input id="steel" type="radio" onclick="saveBackground('wood');"/>
    <label for="radio">  Steel</label>

<input id="metal" type="radio" onclick="saveBackground('wood');"/>
    <label for="radio">  Black metal</label>

Answer 2

The new code looks like this:

    $('<div id="bg_swapper"><div id="one" class="bgCollection"><p class="ocr">Swap Background</p></div><div id="two" class="bgCollection"><p class="ocr">Swap Background</p></div><div id="three" class="bgCollection"><p class="ocr">Swap Background</p></div></div>').insertBefore('.vines_left_top');

$('#bg_swapper p').hide();

 $('#one, #two, #three').mouseover(function() {
     $(this).stop(true).animate({width: '230px'}, 300);
     $(this).children('p').show().css('text-indent','0px');
 });
  $('#one, #two, #three').mouseout(function() {
     $(this).stop(true).animate({width: '20px'}, 300);
    $(this).children('p').hide().css('text-indent','999px');
 });

$('#one').click(function(e) { 
$('#background img:first').attr('src', 'http://cdnimg.visualizeus.com/thumbs/7f/78/gfx,wood-7f78592c9a6ed3390492c560c5ac6fec_h.jpg');
});
$('#two').click(function(e) { 
$('#background img:first').attr('src', 'http://www.aroorsteelcorporation.com/full-images/stainless-steel-834007.jpg');
});
$('#three').click(function(e) { 
$('#background img:first').attr('src', 'http://i00.i.aliimg.com/photo/v0/468538622/Brushed_metal_texture_prepainted_metal.jpg');
});

It uses animated divs and mouseover/out functions instead of the radio buttons.

How do I tie the cookie function to this new method?

Thanks, Aaron.