Question

我正在尝试使用javascript在鼠标悬停时滚动产品图像，但它不起作用，但是，缩略图正在滚动，但主图像未显示我想在鼠标拖动时滚动主图像。

这是网站http://product-slider.mybigcommerce.com/chemex-coffeemaker-3-cup/

预览代码：j42b17p9kb

这是我到目前为止所尝试的代码：

<div class="demo">
  <ul id="lightSlider">



      {{#each product.images}}

                <li class="productView-thumbnail">
                    <a
                        class="productView-thumbnail-link"
                        href="{{getImage this 'product_size' (cdn ../theme_settings.default_image_product)}}"
                        data-image-gallery-item
                        data-image-gallery-new-image-url="{{getImage this 'product_size' (cdn ../theme_settings.default_image_product)}}"
                        data-image-gallery-zoom-image-url="{{getImage this 'zoom_size' (cdn ../theme_settings.default_image_product)}}">
                        <img class="lazyload" data-sizes="auto" src="{{cdn 'img/loading.svg'}}" data-src="{{getImage this 'productview_thumb_size' (cdn ../theme_settings.default_image_product)}}" alt="{{this.alt}}" title="{{this.alt}}">
                    </a>
                     <a href="{{getImage product.main_image 'zoom_size' (cdn theme_settings.default_image_product)}}">
                    <img class="productView-image--default lazyload" 
                         data-sizes="auto" 
                         src="{{cdn 'img/loading.svg'}}" 
                         data-src="{{getImage product.main_image 'product_size' (cdn theme_settings.default_image_product)}}"
                         alt="{{product.main_image.alt}}" title="{{product.main_image.alt}}" data-main-image>
                </a>
                </li>
            {{/each}}            

  </ul>
</div>

原始代码在此处：

    <section class="productView-images" data-image-gallery>
<!---large image----->
            <figure class="productView-image"
                    data-image-gallery-main
                    data-zoom-image="{{getImage product.main_image 'zoom_size' (cdn theme_settings.default_image_product)}}"
                    >
                <div class="productView-img-container">
                    <a href="{{getImage product.main_image 'zoom_size' (cdn theme_settings.default_image_product)}}">
                        <img class="productView-image--default lazyload" 
                             data-sizes="auto" 
                             src="{{cdn 'img/loading.svg'}}" 
                             data-src="{{getImage product.main_image 'product_size' (cdn theme_settings.default_image_product)}}"
                             alt="{{product.main_image.alt}}" title="{{product.main_image.alt}}" data-main-image>
                    </a>
                </div>
            </figure>

<!---large image end----->
<!---thumbnail code------>
            <ul class="productView-thumbnails"{{#gt product.images.length 5}} data-slick='{
                    "infinite": false,
                    "mobileFirst": true,
                    "slidesToShow": 5,
                    "slidesToScroll": 1
                }'{{/gt}}>
                {{#each product.images}}
                    <li class="productView-thumbnail">
                        <a
                            class="productView-thumbnail-link"
                            href="{{getImage this 'product_size' (cdn ../theme_settings.default_image_product)}}"
                            data-image-gallery-item
                            data-image-gallery-new-image-url="{{getImage this 'product_size' (cdn ../theme_settings.default_image_product)}}"
                            data-image-gallery-zoom-image-url="{{getImage this 'zoom_size' (cdn ../theme_settings.default_image_product)}}">
                            <img class="lazyload" data-sizes="auto" src="{{cdn 'img/loading.svg'}}" data-src="{{getImage this 'productview_thumb_size' (cdn ../theme_settings.default_image_product)}}" alt="{{this.alt}}" title="{{this.alt}}">
                        </a>
                    </li>
                {{/each}}
            </ul>
        </section>
<!----thumbnail end------>

请帮忙......！提出一些建议

谢谢

Answer 1

如果我理解正确的话，应该这样做。在鼠标悬停到缩略图时，它会选择缩略图作为主图像。

$('img.lazyautosizes').bind('mouseover', function(){ 
    $(this).trigger('click'); 
    console.log('thumbnail clicked on hover');
});

但是，您可能希望添加一些超时。

如何在大型商务产品库中添加鼠标图像Scroller？

1 个答案: