Блог

Я пытаюсь создать галерею на Shopify, которая поддерживает webp (длинная история).

У меня все в порядке на 99%, изображения отображаются правильно. Мне просто нужно изменить некоторые классы на основе миниатюры, на которую нажимают.

Существует жидкий цикл, который создает все «основные» изображения, все панели первого имеют класс «main-image-hidden», который его скрывает.

Другой жидкий цикл создает эскизы, первый имеет класс «thumb-active», который устанавливает непрозрачность в 0,5, чтобы показать, что он активен.

У меня в голове была четкая идея, как это сделать. Например, если щелкнуть миниатюру с data-slide-index=»3″, произойдет следующее: Основное изображение с индексом 3 удаляет класс «main-image-hidden» Основные изображения (которые ранее были активны) получают класс «main-image-hidden» Миниатюра с индексом 3 получает класс «thumb-active» Миниатюра (которая была ранее активна) теряет класс «thumb-active» (индекс должен быть переменной по понятным причинам!)

Есть ли кто-нибудь достаточно любезный, чтобы указать мне правильное направление для этого?

Заранее спасибо.

»’

     <div class="popup-gallery center" style="max-height:500px; padding-bottom: 10%;">
      {%- for image in product.images -%}
      {% assign webp_url = image.src | img_url: '1x1' | replace: 'products', 'files' | split: 'x' %}

    <a href="{{ webp_url[0] }}x1000.webp" alt="{{ image.alt }}"  class="main-image {% if forloop.first == false %}main-image-hidden{% endif %}" data-slide-index="{{ forloop.index0 }}">

        <picture>
          <source type="image/webp" class="lazy"
                  data-src="{{ webp_url[0] }}x500.webp 1x"
                  data-srcset="{{ webp_url[0] }}x1000.webp 2x,
                               {{ webp_url[0] }}x500.webp 1x">
          <img alt="{{ image.alt }}" class="lazy" 
               data-src="{{ webp_url[0] }}x500.png 1x" 
               data-srcset="{{ webp_url[0] }}x1000.png 2x,
                            {{ webp_url[0] }}x500.png 1x">
        </picture>
        <noscript>
          <img alt="{{ image.alt }}" src="{{ webp_url[0] }}x50.png">
        </noscript>
      </a>
      {%- endfor -%}
    </div>


    {%- if product.images.size > 1 -%}

    <div class="center">
      {%- for image in product.images -%}
      {% assign webp_url = image.src | img_url: '1x1' | replace: 'products', 'files' | split: 'x' %}

      <div style="padding: 0 1%; display:inline-block;" class="thumb {% if forloop.first %}thumb-active{% endif %}" data-slide-index="{{ forloop.index0 }}">

        <picture>
          <source type="image/webp" class="lazy"
                  data-src="{{ webp_url[0] }}x50.webp 1x"
                  data-srcset="{{ webp_url[0] }}x100.webp 2x,
                               {{ webp_url[0] }}x50.webp 1x">
          <img alt="{{ image.alt }}" class="lazy" style="max-height:50px"
               data-src="{{ webp_url[0] }}}x50.png 1x" 
               data-srcset="{{ webp_url[0] }}x100.png 2x,
                            {{ webp_url[0] }}x50.png 1x">
        </picture>
        <noscript>
          <img alt="{{ image.alt }}" src="{{ webp_url[0] }}x50.png">
        </noscript>
      </div>
      {%- endfor -%}
    </div>

    {%- endif -%}


  </div>
  

»’

Я пробовал разное время, но могу учесть индекс.

Я думаю, я понимаю, что вы хотите сделать. Вы можете использовать селектор атрибутов CSS в jQuery, чтобы найти элемент со значением data-slide-index . Это событие делает это за вас?

 $('.thumb').click(function() {
    var index = $(this).attr('data-slide-index');

    $('.main-image').addClass('main-image-hidden');
    $('.main-image[data-slide-index='   index   ']').removeClass('main-image-hidden');

    $('.thumb-active').removeClass('thumb-active');
    $(this).addClass('thumb-active');
});
  

 //This method first get the index after using javascript add style in the this index

<script>
    var serach_main_wrpa = document.getElementsByClassName('serach_main_wrpa');
    function showContent(event) {
       
       
        $(".diamondType").each(function () {
            if ($(this).hasClass("active")) {
                var numItems = $(this).index();
                $(this).removeClass("active");
                serach_main_wrpa[numItems].style.display = "none";
                console.log(numItems);
            }
            $(event).addClass("active");
        });
    }

</script>