wordpress 我想在Woocommerce中点击画廊缩略图时在主图像空间中加载画廊图像

wnrlj8wa 于 12个月前发布在 WordPress

关注(0)|答案(2)|浏览(201)

我有一个与画廊吴商务产品页面。我希望能够点击画廊缩略图图像，并在主画廊现场的负荷。
HTML输出如下：

<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>

字符串
我写了下面的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);
    });

});

型
当我点击图片时，什么都没有发生。我已经记录了变量，可以看到URL被记录在变量中。但是它似乎没有被应用到主图片src。

wordpress

来源：https://stackoverflow.com/questions/77609775/i-want-to-load-a-gallery-image-in-the-main-image-space-when-clicking-on-the-gall

2条答案

按热度按时间

rryofs0p1#

我用这个解决了

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});
});

字符串
}）;

赞(0）回复(0）举报 12个月前

py49o6xq2#

我没有看到#gallery，你的目标。试试这个

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);
    });
});

字符串
或者试着瞄准这个

$('.woocommerce-product-gallery')

型

赞(0）回复(0）举报 12个月前

我来回答

wordpress 我想在Woocommerce中点击画廊缩略图时在主图像空间中加载画廊图像

2条答案

相关问题

热门标签

最新问答