jQuery ползунок для изменения фона фона

Question

Я хочу включить мини-меню 20px на 20 пикселей изображения потенциальных фонов. Когда пользователь нажмет на один из них, фоновое изображение тела изменится и выбор будет сохранен как выбор пользователя.

Я думал об использовании слайдера, но я не знаю, как я мог бы иметь изображения в li и иметь возможность изменять тело css на основе выбора.

Любые идеи?

С Днем 4 июля

EDIT я пытаюсь сохранить IMG URL в этом печенье, его не работает Тхо, его сохранение в куках, но его не извлечение Контента Cookie

EDIT ниже работает, !!!!!!! но цвет фона всегда белый, даже если добавить $("html").css("background-color","red");

FIX, добавил цвет в конце 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> 

<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

не

Понятия не имею, почему вы используете ползунок с точки зрения «выбирают» то, что есть дискретно. Как правило, слайдер предназначен для некоторых непрерывных изменяющихся значений, таких как выбор значения RGB (каждый канал начинается от 0 до 255). Для вашего мини-меню вещь, которая является очень простой JQ + CSS:

HTML разметка меню

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

и заявления Волшебное JQ

// 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

У меня была такая же проблема. Я не знаю, может ли это быть полезным, но, что я сделал, было

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

где url (очевидно) путь к img. Я получил его через json, но вы можете его изменить.

Answer 3

var newBg = ['headercaption.gif', 'loading.gif', 'excelexport.gif', 'grid-layer.gif']; 
var path="themes/default/images/"; 
var i = 0; 
var rotateBg = setInterval(function(){ 
    $('body').css('backgroundImage' , "url('" +path+newBg[i]+ "')"); 
    if(i==4) 
    i=0; 
    else 
     i++; 
}, 5000);