Question

I am using JQuery cookie to change the color of a background. I also change logo images at the same time but on page reload, I am still trying to figure out how to get the cookie to retain the logo image. So far I have the background working with cookie but have not been able to figure out how to keep the selected theme logo image with cookie.

My code so far is:

<div class="main bg1"> 
<img id="logo-img" class="green-img" src="http://i1294.photobucket.com/albums/b601/danomatic11/logo-green.png" alt="logo"/>
<h2>Lorem ipsum dolor sit</h2>
</div>

<p>Choose a theme:</p>
<ul class="theme-switcher">
<li class="green">&nbsp;</li>
<li class="purple">&nbsp;</li>
<li class="rust">&nbsp;</li>
</ul>​

$("li.green").click( function(){ $
(".main").removeClass('bg2 , bg3').addClass("bg1");
$('#logo-img').attr('src', 'http://i1294.photobucket.com/albums/b601/danomatic11/logo-green.png');
$.cookie('mycookie','bg1');
$.cookie('mycookieimg','green-img');
});

etc…

As you can see I set a cookie on the background color when an <li> is clicked and the page is reloaded and I am trying to do the same for a logo image. It works so far as replacing the image on click but I cannot get the cookie to set right on page reload.

I have a Fiddle here.

Answer 1

Try this out….

JSfiddle

   $(document).ready(function(){

/* 
On click the theme is changed for the image and the logo. So far I have JQuery cookie working to keep the background color that was selected even after page reload. 

To do: retain the selected theme logo using coookie.
*/


    $("li.green").click( function(){ $
        (".main").removeClass('bg2 , bg3').addClass("bg1");
        $('#logo-img').attr('src', 'http://i1294.photobucket.com/albums/b601/danomatic11/logo-green.png');
        $.cookie('mycookie','bg1');
        $.cookie('mycookieimg','logo-green');
    });

    $("li.purple").click( function(){ $
        (".main").removeClass("bg1 , bg3").addClass("bg2");
        $('#logo-img').attr('src', 'http://i1294.photobucket.com/albums/b601/danomatic11/logo-purple.png');
        $.cookie('mycookie','bg2');
        $.cookie('mycookieimg','logo-purple');
    });

    $("li.rust").click( function(){ $
        (".main").removeClass("bg1 , bg2").addClass("bg3");
        $('#logo-img').attr('src', 'http://i1294.photobucket.com/albums/b601/danomatic11/logo-rust.png');
        $.cookie('mycookie','bg3');
        $.cookie('mycookieimg','logo-rust');
    }); 

    if ($.cookie('mycookie')) {
        var $imgsrc = $.cookie('mycookieimg');
        $('.main').addClass($.cookie('mycookie'));
        $('#logo-img').attr('src','http://i1294.photobucket.com/albums/b601/danomatic11/'+$imgsrc+'.png');
    }

});​