jquery image random on home.body

ページがロードまたはリフレッシュされるたびに、私は自分のwordpressサイトのホームページに読み込むランダムな背景イメージを取得しようとしています。ここに私がこれまで持っているコードはあります：jquery image random on home.body

これは私のスタイルシートにあるコードです。

のstyle.css

body.home { 
    background-repeat: no-repeat; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale'); 
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')"; 
    height: 100%; 
    width: 100%;}

は、これは私が私のhome.phpファイルを持っているコードです。

home.php

<script> 
     var randomImage = { 
     paths: [ 
      "images/home-bg/website-background1.jpg", 
      "images/home-bg/website-background2.jpg", 
      "images/home-bg/website-background3.jpg", 
      "images/home-bg/website-background4.jpg", 
      "images/home-bg/website-background5.jpg", 
      "images/home-bg/website-background6.jpg", 
      "images/home-bg/website-background7.jpg", 
     ], 
     generate: function(){ 
      var path = randomImage.paths[Math.floor(Math.random()*randomImage.paths.length)]; 
      var img = new Image(); 
      img.src = path; 
      $("body.home").html(img); 
      $("body.home").attr("href", path); 
     } 
     } 
     randomImage.generate(); 
</script>

あなたはそのhttp://americasfinestlighting.com/

おかげで、ウィリアム

出典

2016-05-19 William

を探している他の誰に役立ちます"body .home"）.html（img）; '、これは私のために働く。 – keziah

私はablこれを実現するには、PHPのsnip-itをfunctions.phpファイルに追加します。

add_filter('body_class','random_background_images'); 
function random_background_images($classes) { 

    // Generate Random number from 1 to 7. 
    $background_class = 'background_' . rand(1,7); 

    $classes[] = $background_class; 

    return $classes; 
}

は、その後、私は次のように私のCSSを変更：

body.home.background_1 { 
    background-image: url("images/home-bg/website-background1.jpg"); 
} 
body.home.background_2 { 
    background-image: url("images/home-bg/website-background2.jpg"); 
} 
body.home.background_3 { 
    background-image: url("images/home-bg/website-background3.jpg"); 
} 
body.home.background_4 { 
    background-image: url("images/home-bg/website-background4.jpg"); 
} 
body.home.background_5 { 
    background-image: url("images/home-bg/website-background5.jpg"); 
} 
body.home.background_6 { 
    background-image: url("images/home-bg/website-background6.jpg"); 
} 
body.home.background_7 { 
    background-image: url("images/home-bg/website-background7.jpg"); 
}

あなたは背景がすべてのページに変更したい場合は、単にホームページはCSSの例から.homeを削除しない：

body.background_1 { 
     background-image: url("images/home-bg/website-background1.jpg"); 
    }

希望これは.home` `$（`からではなく、 `$（ "body.home"）` `別々body`の:-)

出典

2016-05-20 00:30:54 William

はjQueryの内、randomImageオブジェクトとrandomImage.generate呼び出しをラップウェブサイトをチェックアウトしたい場合DOMが完全にロードされたときに実行する.ready（）メソッド。また

体内の "ホームクラス" のための "身体" このクエリからスペースアウト ".home"

<script> 
    $(document).ready(function() { 
    var randomImage = { 
     paths: [ 
     "images/home-bg/website-background1.jpg", 
     "images/home-bg/website-background2.jpg", 
     "images/home-bg/website-background3.jpg", 
     "images/home-bg/website-background4.jpg", 
     "images/home-bg/website-background5.jpg", 
     "images/home-bg/website-background6.jpg", 
     "images/home-bg/website-background7.jpg", 
     ], 
     generate: function(){ 
     var path = randomImage.paths[Math.floor(Math.random()*randomImage.paths.length)]; 
     var img = $('<img id="img-responsive">'); // This is Equivalent to $(document.createElement('img')) 
     img.attr('src', path); 
     img.appendTo('#imagediv'); // The div ID you want to append to 
     } 
    } 

    randomImage.generate(); 
    }); 
</script>

ビュー

出典

2016-05-19 05:04:45 akinjide

こんにちは@Akinjideこれは動作しませんでした。ページはまだ背景イメージを読み込んでいません。他の考え？ – William

@ウィリアム私はimgタグを作成するjQueryの方法を使用して上記のコードを変更しました – akinjide

CODEPEN上だけbody背景以下のように変更します。

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script> 

<body> 

</body> 

<script> 
     var randomImage = { 
     paths: [   
      "https://www.ricoh.com/r_dc/caplio/r7/img/sample_04.jpg", 
      "http://www.riscon.co.uk/wp-content/uploads/2015/08/sample3.jpg", 
      "http://cdn6.fonearena.com/i/SonyXperiaZ2CameraSamples/sony-xperia-z2-camera-sample-macro-6.jpg", 
      "https://cdn.photographylife.com/wp-content/uploads/2012/10/Nikon-D600-Sample-4.jpg", 
     ], 
     generate: function(){ 
      var path = randomImage.paths[Math.floor(Math.random()*randomImage.paths.length)];  
      $('body').css('background', 'url('+path+') no-repeat');      
     } 
     } 
     randomImage.generate(); 
</script>

DEMO

出典

2016-05-19 05:26:14

こんにちは@これは動作しませんでした。ページはまだ背景イメージを読み込んでいません。他の考え？ – William

@ウィリアム私の「デモ」リンクをチェックしましたか？私の例に従ってください。 –

jquery image random on home.body

答えて

関連する問題