Заменить значение background-image в style

146

16 октября 2019, 04:50

Вообщем суть такая. В скрипте слайдер выводит информацию так:

 <div class="beautypress-welcome-slider-item content-<?php echo esc_attr($alignment); ?> beautypress-bg" style="background-image: url(<?php echo esc_url($image); ?>);">

Мне нужно заменить значение из поля background-image на мое значение (вручную прописать путь).

Тобишь скрипт выводит слайдер, там 3 разных слайда, с разным background-image, на него накладывается текст и тд. На ПК отображается все нормально, а вот в телефоне мне не нравится, хочу для мобильных телефонов выводить определенный background-image для всех 3 слайдов один и тот же background-image.

Допустим background-image: url(<?php echo esc_url($image); ?>); выводит значение background-image: url("/img/fon1.jpg");

Логика такая:

$(window).resize(function() {
width = $(window).width();
if (width >= 700) {
    //Здесь код, который заменит получившиеся значение в ходе выполнения цикла php background-image: url(/img/fon1.jpg); на значение background-image: url("/img/moy-fon.jpg");
}

});

P.S. Вот условие полное:

<script>
// делаете переменную в начале кода
var isMobile = false;
// проверка на размер экрана (размер я брал вроде с Bootstrap-а)
$(document).ready( function() {
    if ($('body').width() <= 700) {
        isMobile = true;
    }
    // и потом если нужен код только для телефона:
    if (isMobile) {
(function($) {
                var imageUrl = '/img/fon-mobile.jpg';
                $('.beautypress-welcome-slider-item').css('background-image', 'url(' + imageUrl + ')');
}(jQuery));
    }
    // или для остальных
    if (!isMobile) {
    }
} );
</script>

Answer 1

Пример изменения background:

(function($) { 
 
  var imageUrl = 'https://www.gravatar.com/avatar/36a0fa29702c895fb254590089610cee?s=32&d=identicon&r=PG&f=1'; 
 
  $('.beautypress-welcome-slider-item').css('background-image', 'url(' + imageUrl + ')'); 
 
}(jQuery));

.beautypress-welcome-slider-item { 
    width: 200px; 
    height: 200px; 
    margin: 15px; 
    border: 1px solid; 
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div> 
  <div class="beautypress-welcome-slider-item" style="background-image: url('https://www.gravatar.com/avatar/2196b16903565e17033335bcd641d447?s=32&d=identicon&r=PG&f=1');"></div> 
  <div class="beautypress-welcome-slider-item" style="background-image: url('https://www.gravatar.com/avatar/2196b16903565e17033335bcd641d447?s=32&d=identicon&r=PG&f=1');"></div> 
  <div class="beautypress-welcome-slider-item" style="background-image: url('https://www.gravatar.com/avatar/2196b16903565e17033335bcd641d447?s=32&d=identicon&r=PG&f=1');"></div>   
</div>

Пример с нужным для Вас условием:

(function($) { 
  $(window).resize(function(event) { 
    var width = window.innerWidth, 
        widthValue = 700, 
        imageUrl = ''; 
 
    if (width <= widthValue) { 
      imageUrl = 'https://www.gravatar.com/avatar/2196b16903565e17033335bcd641d447?s=32&d=identicon&r=PG&f=1'; 
    } else { 
      imageUrl = 'https://www.gravatar.com/avatar/36a0fa29702c895fb254590089610cee?s=32&d=identicon&r=PG&f=1'; 
    }  
 
    $('.beautypress-welcome-slider-item').css('background-image', 'url(' + imageUrl + ')'); 
  }); 
}(jQuery));

.beautypress-welcome-slider-item { 
  width: 200px; 
  height: 200px; 
  margin: 15px; 
  border: 1px solid; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div> 
  <div class="beautypress-welcome-slider-item" style="background-image: url('https://www.gravatar.com/avatar/2196b16903565e17033335bcd641d447?s=32&d=identicon&r=PG&f=1');"></div> 
  <div class="beautypress-welcome-slider-item" style="background-image: url('https://www.gravatar.com/avatar/2196b16903565e17033335bcd641d447?s=32&d=identicon&r=PG&f=1');"></div> 
  <div class="beautypress-welcome-slider-item" style="background-image: url('https://www.gravatar.com/avatar/2196b16903565e17033335bcd641d447?s=32&d=identicon&r=PG&f=1');"></div>   
</div>