2017-02-17 2 views
1

Ich habe die jQuery-Funktion "Backstretch" zu meinem Blog hinzugefügt, aber ich möchte nur, dass sie auf die Homepage angewendet wird. Ich habe versucht, den Hintergrund jeder einzelnen Seite auf ein schwarzes Bild zu setzen, aber das Schwarz wird gerade in die Diashow eingeblendet.Wie beschränke ich jQuery Backstretch nur auf die Startseite?

Welche Methode empfehlen Sie, um die Diashow nur auf die Startseite zu beschränken? (Bitte beachten Sie, dass ich gerade in diesem Code Sachen anfangen ...)

Hier ist der Code:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/> 
<script> 
//<![CDATA[ 
/* 
* jQuery Backstretch 
* Version 1.2.8 
* http://srobbin.com/jquery-plugins/jquery-backstretch/ 
* Add a dynamically-resized background image to the page 
* Copyright (c) 2012 Scott Robbin (srobbin.com) 
* Licensed under the MIT license 
* https://raw.github.com/srobbin/jquery-backstretch/master/LICENSE.txt 
*/ 
;(function(a){a.backstretch=function(p,b,l){function s(){if(p){var b;0==c.length?c=a("<div />").attr("id","backstretch").css({left:0,top:0,position:m?"fixed":"absolute",overflow:"hidden",zIndex:-999999,margin:0,padding:0,height:"100%",width:"100%"}):c.find("img").addClass("deleteable");b=a("<img />").css({position:"absolute",display:"none",margin:0,padding:0,border:"none",zIndex:-999999,maxWidth:"none"}).bind("load",function(d){var b=a(this),e;b.css({width:"auto",height:"auto"});e=this.width||a(d.target).width();d=this.height||a(d.target).height();n=e/d;q();b.fadeIn(g.speed,function(){c.find(".deleteable").remove();"function"==typeof l&&l()})}).appendTo(c);0==a("body #backstretch").length&&(0===a(window).scrollTop()&&window.scrollTo(0,0),a("body").append(c));c.data("settings",g);b.attr("src",p);a(window).unbind("resize.backstretch").bind("resize.backstretch",function(){"onorientationchange"in window&&window.pageYOffset===0&&window.scrollTo(0,1);q()})}}function q(){try{j={left:0,top:0},rootWidth=h=o.width(),rootHeight=r?window.innerHeight:o.height(),f=h/n,f>=rootHeight?(k=(f-rootHeight)/2,g.centeredY&&(j.top="-"+k+"px")):(f=rootHeight,h=f*n,k=(h-rootWidth)/2,g.centeredX&&(j.left="-"+k+"px")),c.css({width:rootWidth,height:rootHeight}).find("img:not(.deleteable)").css({width:h,height:f}).css(j)}catch(a){}}var t={centeredX:!0,centeredY:!0,speed:0},c=a("#backstretch"),g=c.data("settings")||t;c.data("settings");var o,m,r,n,h,f,k,j;b&&"object"==typeof b&&a.extend(g,b);b&&"function"==typeof b&&(l=b);a(document).ready(function(){var b=window,d=navigator.userAgent,c=navigator.platform,e=d.match(/AppleWebKit\/([0-9]+)/),e=!!e&&e[1],f=d.match(/Fennec\/([0-9]+)/),f=!!f&&f[1],g=d.match(/Opera Mobi\/([0-9]+)/),h=!!g&&g[1],i=d.match(/MSIE ([0-9]+)/),i=!!i&&i[1];o=(m=!((-1<c.indexOf("iPhone")||-1<c.indexOf("iPad")||-1<c.indexOf("iPod"))&&e&&534>e||b.operamini&&"[object OperaMini]"==={}.toString.call(b.operamini)||g&&7458>h||-1<d.indexOf("Android")&&e&&533>e||f&&6>f||"palmGetResource"in window&&e&&534>e||-1<d.indexOf("MeeGo")&&-1<d.indexOf("NokiaBrowser/8.5.0")||i&&6>=i))?a(window):a(document);r=m&&window.innerHeight;s()});return this}})(jQuery); 
//]]> 
</script> 

<script> 
//<![CDATA[ 
var images = [ 
"https://c1.staticflickr.com/6/5746/30759260720_fcf6549b06_k.jpg", 
"https://c1.staticflickr.com/8/7665/27860820686_c96a964621_k.jpg", 
"https://c1.staticflickr.com/6/5506/30835888326_39d51b9065_k.jpg", 
    ]; 

    $(images).each(function(){ 
$('<img/>')[0].src = this; 
    }); 
    var index = 0; 
$.backstretch(images[index], {speed: 1000}); 
    var slideshow = setInterval(function() { 
    index = (index >= images.length - 1) ? 0 : index + 1; 
    $.backstretch(images[index]); 
    }, 5000); 
//]]> 
</script> 
+0

uns Bitte zeigen Sie Ihren Code, sonst werden wir nicht wissen, was dein Problem ist. –

Antwort

0

Schließen Sie die jQuery-Plugin Gerade Code in Ihrer Vorlage innerhalb der folgenden Bedingung -

<b:if cond='data:blog.url == data:blog.homepageUrl'> 
<!-- jQuery Backstretch plugin code --> 
</b:if> 

Dieser Zustand lädt nur den Code auf der Homepage.

In Ihrem Blog wird der endgültige Code aussehen -

<b:if cond='data:blog.url == data:blog.homepageUrl'> 
<script> 
    //<![CDATA[ 
    /* 
    * jQuery Backstretch 
    * Version 1.2.8 
    * http://srobbin.com/jquery-plugins/jquery-backstretch/ 
    * Add a dynamically-resized background image to the page 
    * Copyright (c) 2012 Scott Robbin (srobbin.com) 
    * Licensed under the MIT license 
    * https://raw.github.com/srobbin/jquery-backstretch/master/LICENSE.txt 
    */ 
    ; 
    (function(a) { 
     a.backstretch = function(p, b, l) { 
      function s() { 
       if(p) { 
        var b; 
        0 == c.length ? c = a("<div />").attr("id", "backstretch").css({ 
         left: 0, 
         top: 0, 
         position: m ? "fixed" : "absolute", 
         overflow: "hidden", 
         zIndex: -999999, 
         margin: 0, 
         padding: 0, 
         height: "100%", 
         width: "100%" 
        }) : c.find("img").addClass("deleteable"); 
        b = a("<img />").css({ 
         position: "absolute", 
         display: "none", 
         margin: 0, 
         padding: 0, 
         border: "none", 
         zIndex: -999999, 
         maxWidth: "none" 
        }).bind("load", function(d) { 
         var b = a(this), 
          e; 
         b.css({ 
          width: "auto", 
          height: "auto" 
         }); 
         e = this.width || a(d.target).width(); 
         d = this.height || a(d.target).height(); 
         n = e/d; 
         q(); 
         b.fadeIn(g.speed, function() { 
          c.find(".deleteable").remove(); 
          "function" == typeof l && l() 
         }) 
        }).appendTo(c); 
        0 == a("body #backstretch").length && (0 === a(window).scrollTop() && window.scrollTo(0, 0), a("body").append(c)); 
        c.data("settings", g); 
        b.attr("src", p); 
        a(window).unbind("resize.backstretch").bind("resize.backstretch", function() { 
         "onorientationchange" in window && window.pageYOffset === 0 && window.scrollTo(0, 1); 
         q() 
        }) 
       } 
      } 

      function q() { 
       try { 
        j = { 
         left: 0, 
         top: 0 
        }, rootWidth = h = o.width(), rootHeight = r ? window.innerHeight : o.height(), f = h/n, f >= rootHeight ? (k = (f - rootHeight)/2, g.centeredY && (j.top = "-" + k + "px")) : (f = rootHeight, h = f * n, k = (h - rootWidth)/2, g.centeredX && (j.left = "-" + k + "px")), c.css({ 
         width: rootWidth, 
         height: rootHeight 
        }).find("img:not(.deleteable)").css({ 
         width: h, 
         height: f 
        }).css(j) 
       } catch(a) {} 
      } 
      var t = { 
        centeredX: !0, 
        centeredY: !0, 
        speed: 0 
       }, 
       c = a("#backstretch"), 
       g = c.data("settings") || t; 
      c.data("settings"); 
      var o, m, r, n, h, f, k, j; 
      b && "object" == typeof b && a.extend(g, b); 
      b && "function" == typeof b && (l = b); 
      a(document).ready(function() { 
       var b = window, 
        d = navigator.userAgent, 
        c = navigator.platform, 
        e = d.match(/AppleWebKit\/([0-9]+)/), 
        e = !!e && e[1], 
        f = d.match(/Fennec\/([0-9]+)/), 
        f = !!f && f[1], 
        g = d.match(/Opera Mobi\/([0-9]+)/), 
        h = !!g && g[1], 
        i = d.match(/MSIE ([0-9]+)/), 
        i = !!i && i[1]; 
       o = (m = !((-1 < c.indexOf("iPhone") || -1 < c.indexOf("iPad") || -1 < c.indexOf("iPod")) && e && 534 > e || b.operamini && "[object OperaMini]" === {}.toString.call(b.operamini) || g && 7458 > h || -1 < d.indexOf("Android") && e && 533 > e || f && 6 > f || "palmGetResource" in window && e && 534 > e || -1 < d.indexOf("MeeGo") && -1 < d.indexOf("NokiaBrowser/8.5.0") || i && 6 >= i)) ? a(window) : a(document); 
       r = m && window.innerHeight; 
       s() 
      }); 
      return this 
     } 
    })(jQuery); 
    //]]> 

</script> 
<script> 
    //<![CDATA[ 
    var images = [ 
     "https://c1.staticflickr.com/6/5746/30759260720_fcf6549b06_k.jpg", 
     "https://c1.staticflickr.com/8/7665/27860820686_c96a964621_k.jpg", 
     "https://c1.staticflickr.com/6/5506/30835888326_39d51b9065_k.jpg", 
    ]; 

    $(images).each(function() { 
     $('<img/>')[0].src = this; 
    }); 
    var index = 0; 
    $.backstretch(images[index], { 
     speed: 1000 
    }); 
    var slideshow = setInterval(function() { 
     index = (index >= images.length - 1) ? 0 : index + 1; 
     $.backstretch(images[index]); 
    }, 5000); 
    //]]> 

</script> 
</b:if> 
Verwandte Themen