This js code below is used in Prestashop to swap the main image with by clicking thumbnails:
$('.js-qv-product-cover').attr('src', $(event.target).data('image-large-src'));
The HTML code for the main image is below:
<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>
I am trying to use the image as a background and I came up with this code:
<div class="product-cover" style="background-image: url({$product.cover.bySize.ats_large.url});"></div>
In the JS file, I change the 'src' to 'url' but it is not working when I click the thumbnails. What is the right way of doing this so that the main image is swapped as a background?
This is how you change a background image with jquery. In your case, just replace the random urls i used with $(event.target).data('image-large-src') (what should be your own image 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></div>
I was able to resolve this by using the code below:
var quickviewDataBgPath = $(event.target).data('image-large-src');
$('.js-qv-product-cover').css('background-image', 'url(' + quickviewDataBgPath + ')' );