jquery image random on home.body

Question

Я пытаюсь получить случайное фоновое изображение для загрузки на мою домашнюю страницу сайта Wordpress каждый раз, когда страница загружается или обновляется. Вот код, который у меня есть до сих пор:

Это код, который у меня есть в моей таблице стилей.

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/

Спасибо, Уильям

Answer 1

Я был abl e, чтобы выполнить это, добавив snip-it из php в мой файл 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"); 
} 

Если вы хотите, чтобы изменить фон на всех страницах не только домашняя страница удалить .home из CSS Пример:

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

надеется, что это помогает кому-то еще, кто ищет :-)

Answer 2

Wrap Объект randomImage и вызов randomImage.generate, внутри JQuery .ready() для выполнения, когда DOM полностью загружен.

Также пространство из ".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> 

Посмотреть на CODEPEN

Answer 3

Просто измените 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