Изменение изображения на сайте Hover BigCommerce - PullRequest
Новая
       15

Изменение изображения на сайте Hover BigCommerce

0 голосов
/ 11 января 2019

Я настроил изменение изображения при наведении курсора на сайт BigCommerce. Проблема заключается в том, что если изображение продукта изначально настроено на отображение: ни одно изображение не будет загружаться после запуска наведения. Наведение курсора на продукты покажет проблему бесконечной нагрузки, с которой я сталкиваюсь.

Исследовано на форумах BigCommerce и в документации по теме трафаретов. 

<div class="images">
    <a
      class="lazy-image replaced-image main {{image_ratio}} {{image_size}}"
      href="{{url}}"
      data-src="{{getImage img size (cdn default)}}">
      <img class="lazy-image main" data-src="{{getImage img size (cdn default)}}" alt="{{img.alt}}">
      <div class="spinner"></div>
    </a>
    {{#if product.images.[1]}}
    <a
      class="lazy-image replaced-image second {{image_ratio}} {{image_size}}"
      href="{{url}}"
      data-src="{{getImage product.images.[1] img size (cdn default)}}">
      <img class="lazy-image main" data-src="{{getImage product.images.[1] img size (cdn default)}}" alt="{{img.alt}}">
      <div class="spinner"></div>
    </a>
    {{else}}
    <a
      class="lazy-image replaced-image second {{image_ratio}} {{image_size}}"
      href="{{url}}"
      data-src="{{getImage img size (cdn default)}}">
      <img class="lazy-image main" data-src="{{getImage img size (cdn default)}}" alt="{{img.alt}}">
      <div class="spinner"></div>
    </a>
    {{/if}}
    </div>

Я хочу, чтобы изображения товаров менялись между индексами [0] и [1] при наведении.

1 Ответ

0 голосов
/ 13 января 2019

Я бы предложил использовать события «onmouseover» и «onmouseout» для одного тега изображения, чтобы поменять источник изображения между изображениями [1] и изображением продукта по умолчанию: 

<img class="card-image lazyload" onmouseover="this.src='{{getImage images.[1] img size (cdn default)}}'" onmouseout="this.src='{{getImage image 'productgallery_size' (cdn default)}}'" data-sizes="auto" src="{{cdn 'img/loading.svg'}}" data-src="{{getImage image 'productgallery_size' (cdn theme_settings.default_image_product)}}" alt="{{image.alt}}" title="{{image.alt}}">
...