Question 300090 in Wordpress Question posted in
The official Wordpress documentation can be found here.

WordPress – I want to load a gallery image in the main image space when clicking on the gallery thumbnail in Woocommerce

I’ve got a woo-commerce product page with a gallery. I want to be able to click the gallery thumbnail image and have that load in the main gallery spot.

The HTML output is as follows:

<div class="woocommerce-product-gallery woocommerce-product-gallery--with-images woocommerce-product-gallery--columns-4 images" data-columns="4" style="opacity: 1; transition: opacity 0.25s ease-in-out 0s;">
    <div class="woocommerce-product-gallery__wrapper">
      <div data-thumb="https://webaddress.co.uk/wp-content/uploads/2023/12/BSC3-100x100.jpg" data-thumb-alt="BSC3" id="main-image" class="woocommerce-product-gallery__image">
         <a data-lightbox="Gallery" href="https://webaddress.co.uk/wp-content/uploads/2023/12/BSC3.jpg">
         <img width="600" height="600" src="https://webaddress.co.uk/wp-content/uploads/2023/12/BSC3-2.jpg" class="wp-post-image" alt="BSC3" title="" data-caption="" data-src="https://webaddress.co.uk/wp-content/uploads/2023/12/BSC3.jpg" data-large_image="https://webaddress.co.uk/wp-content/uploads/2023/12/BSC3.jpg" data-large_image_width="1000" data-large_image_height="1000" decoding="async" fetchpriority="high" srcset="https://webaddress.co.uk/wp-content/uploads/2023/12/BSC3-600x600.jpg 600w, https://webaddress.co.uk/wp-content/uploads/2023/12/BSC3-300x300.jpg 300w, https://webaddress.co.uk/wp-content/uploads/2023/12/BSC3-100x100.jpg 100w, https://webaddress.co.uk/wp-content/uploads/2023/12/BSC3-150x150.jpg 150w, https://webaddress.co.uk/wp-content/uploads/2023/12/BSC3-768x768.jpg 768w, https://webaddress.co.uk/wp-content/uploads/2023/12/BSC3.jpg 1000w" sizes="(max-width: 600px) 100vw, 600px">
         </a>
      </div>
      <div class="wwoocommerce-product-gallery--with-thumbnails images gallery" data-columns="4">
         <div data-thumb="https://webaddress.co.uk/wp-content/uploads/2023/12/BSC3-2-100x100.jpg" data-thumb-alt="" class="woocommerce-product-gallery__image">
            <a href="https://webaddress.co.uk/wp-content/uploads/2023/12/BSC3-2.jpg">
            <img width="100" height="100" src="https://webaddress.co.uk/wp-content/uploads/2023/12/BSC3-2-100x100.jpg" class="" alt="" title="BSC3-2" data-caption="" data-src="https://webaddress.co.uk/wp-content/uploads/2023/12/BSC3-2.jpg" data-large_image="https://webaddress.co.uk/wp-content/uploads/2023/12/BSC3-2.jpg" data-large_image_width="1000" data-large_image_height="1000" decoding="async" srcset="https://webaddress.co.uk/wp-content/uploads/2023/12/BSC3-2-100x100.jpg 100w, https://webaddress.co.uk/wp-content/uploads/2023/12/BSC3-2-300x300.jpg 300w, https://webaddress.co.uk/wp-content/uploads/2023/12/BSC3-2-600x600.jpg 600w, https://webaddress.co.uk/wp-content/uploads/2023/12/BSC3-2-150x150.jpg 150w, https://webaddress.co.uk/wp-content/uploads/2023/12/BSC3-2-768x768.jpg 768w, https://webaddress.co.uk/wp-content/uploads/2023/12/BSC3-2.jpg 1000w" sizes="(max-width: 100px) 100vw, 100px">
            </a>
         </div>
      </div>
    </div>
</div>

I’ve written the following jquery

jQuery(document).ready(function($) {
    $('.gallery').on('click', 'a', function(e) {
        e.preventDefault();

        var imageUrl = $(this).find('img').attr('data-src');
        console.log(imageUrl);
    
        $('#main-image img').attr('src', imageUrl);
    });

});

When I click the image, nothing happens. I’ve logged the variable and can see that the URL is being recorded in the variable. However it doens’t seem to be being applied to the main image src.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I resolved it with this

    jQuery(document).ready(function($) {
$('.gallery').on('click', 'a', function(e) {
    e.preventDefault();

    var imageUrl = $(this).find('img').attr('data-src');
  //  console.log(imageUrl);

    $('#main-image img').attr({'src': imageUrl,'data-src': imageUrl,'srcset': imageUrl});
});

    });


  2. 0

    I don’t see #gallery, which you targeting. Try this one

    jQuery(document).ready(function($) {
    $('.woocommerce-product-gallery__wrapper').on('click', 'a', function(e) {
        e.preventDefault();

        var imageUrl = $(this).find('img').attr('data-src');
        console.log(imageUrl);

        $('#main-image img').attr('src', imageUrl);
    });
});

    or try targeting this

    $('.woocommerce-product-gallery')
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search