jquery.cookie.js로 배경 이미지 만들기

Question

이 순간 나는 배경 이미지 슬라이더가 있습니다.이 슬라이더에서 사용자는 버튼을 클릭하고 사이트를 볼 때 배경으로 사용할 7 개의 이미지 중 하나를 선택할 수 있습니다. 물론 다른 페이지로 던져서 클릭하면 기본 이미지로 되돌아갑니다. 이 문제를 해결하기 위해 jquery.cookie.js를 얻을 수있는 방법이 있습니까? 다음은 나의 시도이다.

작동하는 jQuery를 부분 :

  $(function(){ 
       $('.btn a').parents('.btn').click(function(){ 
        var img = $(this).attr('data-bg-img'), 
        afterFadeIn = function() { 
         $('body').css('background-image', 'url(' + img + ')'); 
         $('bg-style').css('opacity', 0); 
        }; 
        $('#bg-style') 
        .css({'background-image': 'url(' + img + ')', 'opacity': 0}) 
        .animate({ 'opacity' : 1 }, 500, afterFadeIn); 
       }); 
      }); 

하지 않습니다 jQuery를 부분 : $ (함수() {

   if($.cookie("html_img")) { 
        $('html').css("background-image", $.cookie("html_img")); 
       } 

       $('.btn a').click(function() { 

        var image = 'imgs/someimage.jpg'; 
        // var image = $(this).attr('src'); 

        $('html').css("background-image", image); 

        $.cookie("html_img", image, {expires:7}); 

        return false; 

       }); 

      }); 

html로 :

  <div id="slideshow" class="bgSlider"> 
       <div class="btn btn1" data-bg-img ="<?php bloginfo('stylesheet_directory'); ?>/images/k2-in-skies.jpg"><a href="#">Button 1</a></div> 
       <div class="btn btn2" data-bg-img ="<?php bloginfo('stylesheet_directory'); ?>/images/k2.jpg" class="bgimage"><a href="#">Button 2</a></div> 
       <div class="btn btn3" data-bg-img ="<?php bloginfo('stylesheet_directory'); ?>/images/kunhar-river.jpg"><a href="#">Button 3</a></div> 
       <div class="btn btn4" data-bg-img ="<?php bloginfo('stylesheet_directory'); ?>/images/mitre-peak-baltoro.jpg"><a href="#">Button 4</a></div> 
       <div class="btn btn5" data-bg-img ="<?php bloginfo('stylesheet_directory'); ?>/images/musa-ka-musalla.jpg"><a href="#">Button 5</a></div> 
       <div class="btn btn6" data-bg-img ="<?php bloginfo('stylesheet_directory'); ?>/images/nanga-parbat.jpg"><a href="#">Button 6</a></div> 
       <div class="btn btn7" data-bg-img ="<?php bloginfo('stylesheet_directory'); ?>/images/naran-valley.jpg"><a href="#">Button 7</a></div> 
       <div class="clearfix"></div> 
      </div> 

CSS :

   #bg-style { width:100%; height: 700px; position:absolute; } 

      .btncontain { width:80%; margin: 0 auto; position:absolute; } 

      .btn a { width: 150px; height: 70px; background: yellow; float: left; margin: 0 30px 100px 30px; } 

      #bg-style { 
       background: url(../images/k2-in-skies.jpg) no-repeat center top; 
      } 

많은 감사!

Answer 1

쿠키 코드의 첫 줄에 중단 점을 넣어두면 편리합니다.

  function (key, value, options) { 

        // key and at least value given, set cookie... 
        if (arguments.length > 1 && (!/Object/.test(Object.prototype.toString.call(value)) || value === null || value === undefined)) { 
         options = $.extend({}, options); 

         if (value === null || value === undefined) { 
          options.expires = -1; 
         } 

         if (typeof options.expires === 'number') { 
          var days = options.expires, t = options.expires = new Date(); 
          t.setDate(t.getDate() + days); 
         } 

         value = String(value); 

         return (document.cookie = [ 
          encodeURIComponent(key), '=', options.raw ? value : encodeURIComponent(value), 
          options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE 
          options.path ? '; path=' + options.path : '', 
          options.domain ? '; domain=' + options.domain : '', 
          options.secure ? '; secure' : '' 
         ].join('')); 
        } 

        // key and possibly options given, get cookie... 
        options = value || {}; 
        var decode = options.raw ? function(s) { return s; } : decodeURIComponent; 

        var pairs = document.cookie.split('; '); 
        for (var i = 0, pair; pair = pairs[i] && pairs[i].split('='); i++) { 
         if (decode(pair[0]) === key) return decode(pair[1] || ''); // IE saves cookies with empty string as "c; ", e.g. without "=" as opposed to EOMB, thus pair[1] may be undefined 
        } 
        return null; 
       }