Этот скрипт позволит тебе сделать удобную галерею для предпросмотра изображений товара, без необходимости открыть каждый по одному. Модификация совместима с Autoscale.

Как сделать галерею для карточек товара на Tilda?

(cвернуть)

Инструкция

Как установить

1. Создай блок магазина с номером ST3***

2. Обязательно отключи в настройках блока "Показывать второе изображение при наведении"

3. Укажи recid этого блока в генераторе

4. Скопируй код и вставь в блок т123

5. Если будешь делать такой эффект для нескольких блоков магазина на странице, то повтори для них п. 1-4 (также см. Важно)

- Обязательно синхронизируй блок ST3** с каталогом, чтобы мод мог нормально работать. Нельзя просто забивать карточки в разделе "контент" без синхронизации блока с каталогом Тильды

- В Тильде идёт привязка к тому, в каком порядке ты создаешь блоки магазина, поэтому убедись, что какой-либо из блоков магазина не был помещен над блоками магазина, созданными раньше него. Для перестраховки можешь просто каждый из блоков магазина по порядку продублировать и удалить старый и Тильда их перепривяжет. И уже с их recid можешь работать и указывать "какой это блок магазина на странице по счёту"

- Убедись что у тебя выключена настройка "оригинальное соотношение сторон изображений", если тебе требуется пагинация. Если эта настройка включена, то пагинация показываться не будет

Важно!

undefined

Отчистить поля

Загрузить сохраненные значения

undefined

Настройки пагинации

undefined

Скопировать код

<!--Библиотека VORON--><!--Галерея карточки товара https://voron-dev.ru/cards-hover-->
<script>
    function waitForElement(elementId, callBack) {
      window.setTimeout(function () {
        let element = document.querySelector(elementId);
        if (element !== null && element.length !== 0) {
          callBack(elementId, element);
        } else {
          waitForElement(elementId, callBack);
        }
      }, 50);
    };
  function initCardGallery1() {
  let store = JSON.parse(window.tStoreXHR[Object.keys(window.tStoreXHR)[1-1]].response);
  let cards = document.querySelectorAll("#rec12345678 .t-store__card:not([num])");
  for (var o = 0; o < cards.length; o++) {
    
    cards[o].querySelector(".js-product-img").addEventListener("mousemove", function (e) {
    let photos = JSON.parse(store.products[e.target.closest('.t-store__card').attributes.num.value].gallery); 
      for (var i = 0; i < photos.length; i++) {
        if (e.layerX > e.target.clientWidth * ((1 / photos.length) * i)) {
            if (e.target.tagName.toLowerCase() === "img") e.target.setAttribute("src", photos[i].img);
            else e.target.setAttribute("style", 'background-image: url("' + photos[i].img + '") !important;');
          if (typeof t786__updateLazyLoad !== "undefined") {
            t786__updateLazyLoad();
          };
          
        }
      }
    });
    
    cards[o].setAttribute('num', o);
  }
  };
  if (window.innerWidth > 1000) {
  waitForElement('#rec12345678 .t-store__card', () => {  
  let loadObserver = new MutationObserver(function (mutations) {
      mutations.forEach(function (mutation) {
        if (document.querySelector('#rec12345678 .t-store__card') !== null && document.querySelectorAll("#rec12345678 .t-store__card")[document.querySelectorAll("#rec12345678 .t-store__card").length -1].attributes.num === undefined) {
          initCardGallery1() 
        }
      });
    });
    loadObserver.observe(document.querySelector('#rec12345678'), {
              attributes: true
    });
  initCardGallery1()
    })
  }
</script>

Два блока каталога созданы в нужном порядке и на каждый из них сгенерирован код. Модификацией в галерею подгружаются все фотки товара

Примеры работы модификации