Как определить порядковый номер кликнутого элемента и при открытии галереи показывать соответствующее изображение?

Question

[mirti de vednis]

На странице выведен перечень картинок, каждая из которых обернута слоем с одним классом. При клике на любую из картинок в модалке открывается галерея. Отсчет там ведется с первой картинки, что понятно из нижеследующего кода. Как сделать, чтобы при событии click галерея открывалась именно с выбранного элемента?

<section class="catalog section" id="catalog">
      ...
        <div class="catalog-wrap" id="toCatalog">   

          <div class="catalog-wrap__item  lakobel mirror bedroom ">
            <div class="catalog-wrap__img toGallery"><img data-src="img/catalog/image (1).jpg" alt=""></div>
            <form action="#" id="catalog-form1" class="catalogForm">
              <input type="text" name="size" id="" placeholder="Введите размер Ш х В х Г"
                class="input-size catalog-wrap__input" required>
              <input type="tel" name="phone" id="" class="catalogInput input-phone catalog-wrap__input"
                placeholder="x (xxx) xxx xx-xx" required>
              <button type="submit" class="button catalog-wrap__button">УЗНАТЬ ЦЕНУ</button>
            </form>
          </div>
         <!-- Далее идут аналогичные div с ссылками на картинки image ([2,3,...,112]).jpg-->
         </div>
      </section>

var s1,s2,s,n;
	var i=1;
	
  $('.toGallery').on('click', function () {
    // initGallery;
    // $("body").css("overflow-y","hidden");
    $('.body').addClass('no-scroll');
    // jQuery('#scrollbar').tinyscrollbar({
    //   scroll: false,
    // });   
    s1 = '<div class="gallery-slider__item"><div class="gallery-slider__img"><img src="img/catalog/image (';
    s2 = ').jpg" alt=""></div></div>';
    n=112; //число картинок
    $('#gallery').addClass('gallery_active');
    for (var i=n;i>1;i--){
      s = s1 + i +s2;
      $('#gallerySliderFirst').after(s);
    }
    $('#gallerySliderFirst').lazyLoadXT();

    $("#galleryslider").slick('reinit');
    $('.gallery-arrow__img').lazyLoadXT();

  });
		
  $('#closeGallery').on('click', function () {
    // $("body").css("overflow-y","visible");
    $('.body').removeClass('no-scroll');
    var scrollTop = $('#toCatalog').offset().top;
    $(document).scrollTop(scrollTop);

    $('#gallery').removeClass('gallery_active');

    if($(document).width()<=800){
      $("#galleryslider").slick('unslick');
    }
  });

  $('#galleryslider').slick({
    infinite: true,
    slidesToShow: 2,
    slidesToScroll: 1,
    speed: 700,
    rows: 1,
    autoplay: true,
    autoplaySpeed: 1500,
    prevArrow: $('.gallery-arrow__left'),
    nextArrow: $('.gallery-arrow__right'),
    responsive: [
      {
        breakpoint: 800,
        settings: {
          arrows: false,
          slidesToShow: 1,
          slidesToScroll: 1
        }
      }
 
    ]
  });

Answer 1

[0xD34F]

Получить номер кликнутого элемента:

const index = $(this).closest('.catalog-wrap__item').index();

Переключиться на соответствующий слайд:

$('#galleryslider').slick('slickGoTo', index);