jquery slider to change body background

Question

I want to include a mini menu 20px by 20px images of potential backgrounds. When a user clicks on one them the body background image will change and the selection saved as the users choice.

I've thought of using a slider but I don't know how I would be able to have the images in a li and be able to change the body css based on the selection.

Any ideas?

Happy July 4th

EDIT i am trying to save the img url in that cookie, its not working tho, its saving in the cookie but its not retrieving the cookie content

EDIT the below works, !!!!!!! but the background color is always white even if i add a "" $("html").css("background-color","red"); "" FIX, added color at the end of the url $("html").css("background", "url('" + imgCookieLink + "') no-repeat fixed center top #343837");

$(document).ready(function() {
$("#BGSelector a").click(function() {
    var imgLink = $("img", this).attr("src");
 $.cookie("html_img", "" + imgLink + "", { expires: 7 });
 var imgCookieLink = $.cookie("html_img");
 $("html").css("background", "url('" + imgCookieLink + "')");
});
});

<script type="text/javascript">
$(document).ready(function() { 
    $("#BGSelector a").click(function() {
       var imgLink = $("img", this).attr("src");
       $.cookie("html_img", "" + imgLink + "", { path: '/vitamovie', expires: 7 });
       var imgCookieLink = $.cookie("html_img");       
       $("html").css("background", "url('" + imgCookieLink + "') no-repeat fixed center    top"); 
    }); 
 });

<script type="text/javascript">
$(document).ready(function() {   
       var imgCookieLink = $.cookie("html_img");  
       $("html").css("background", "url('" + imgCookieLink + "') no-repeat fixed center top");

 });

</script>

Answer 1

No idea why you use slider in terms of "choosing" something that is discrete. Generally a slider is for some continous changing values like selecting RGB value (which each channel starts from 0 - 255). For your mini-menu thing, which is very simple JQ + CSS:

HTML Markup for the menu

<ul id="BGSelector">
    <li><a href="#ChangeBG"><img src="bgImageSource1"/></a></li>
    <li><a href="#ChangeBG"><img src="bgImageSource2"/></a></li>
    <li><a href="#ChangeBG"><img src="bgImageSource3"/></a></li>
</ul>

And the Magic JQ statements

// Init the bg change UI (which is within document ready)
$(function(){
    $("#BGSelector a").click(function() {
        var imgLink = $("img", this).attr("src");

        // change the body background css
        $("body").css("background", "url('" + imgLink + "')");
    });
});

Answer 2

I had the same problem. I don't know if this can be useful but, what i did was

var url= data.bgimg[0] ;
$('body').css('background-image',"url(" + url + ")");

where url is (obviously) the path to the img. I got it via json but you can change it.