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>
<script type="text/javascript">
$(document).ready(function() {
var imgCookieLink = $.cookie("html_img");
$("html").css("background", "url('" + imgCookieLink + "') no-repeat fixed center top");
});
</script>
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 + "')");
});
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With