Поменять изображение, используемое в качестве фона с JavaScript - PullRequest
Новая
       10

Поменять изображение, используемое в качестве фона с JavaScript

0 голосов
/ 15 мая 2018

Этот код js ниже используется в Prestashop, чтобы поменять главное изображение нажатием на миниатюру: 

$('.js-qv-product-cover').attr('src', $(event.target).data('image-large-src'));

HTML-код для основного изображения ниже: 

<div class="product-cover">
<img class="js-qv-product-cover" src="{$product.cover.bySize.ats_large.url}" alt="{$product.cover.legend}" title="{$product.cover.legend}" style="width:100%;" itemprop="image">
</div>

Я пытаюсь использовать изображение в качестве фона, и я придумал этот код: 

<div class="product-cover" style="background-image: url({$product.cover.bySize.ats_large.url});"></div>

В файле JS я изменяю 'src' на 'url', но он не работает, когда я нажимаю на миниатюры. Как правильно сделать это, чтобы основное изображение было заменено на фоновое?

Ответы [ 2 ]

0 голосов
/ 16 мая 2018

Мне удалось решить эту проблему с помощью кода ниже: 

var quickviewDataBgPath  = $(event.target).data('image-large-src');
$('.js-qv-product-cover').css('background-image', 'url(' + quickviewDataBgPath + ')' );
0 голосов
/ 15 мая 2018

Так вы меняете фоновое изображение с помощью jquery. В вашем случае просто замените случайные URL, которые я использовал, на $(event.target).data('image-large-src') (что должно быть вашим собственным URL-адресом изображения. 

$('.change').on('click', () => {
  $('.container').css("background-image", "url('https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569_960_720.jpg')");
})
.container {
  width: 500px;
  height: 200px;
  background-image: url('https://images.pexels.com/photos/370799/pexels-photo-370799.jpeg?auto=compress&cs=tinysrgb&h=350')
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container"></div>

<button class="change">Change</button>
...