Как вызвать div с тем же '.length', что и у эскиза, на который я нажал?

Question

На моей странице есть блоки с большими изображениями (одно отображается, остальные скрыты). На моей странице также есть div с миниатюрами.

http://www.jordy.studio/paintings_new

После нажатия на миниатюру я хотел бы скрыть текущее большое изображение и показать соответствующее большое изображение.

Я новичок в jQuery. Перемещение по миниатюрам работает так, как мне нравится:

// Slider
var divs = $('.expo');
divs.hide().first().show();
$("#next").click(function(e) {
   divs.eq(now).hide("slide", {
      direction: "left"
   }, 300);
   now = (now + 1 < divs.length) ? now + 1 : 0;
   divs.eq(now).show("slide", {
      direction: "right"
   }, 300);
   updateCounter();
});
$("#prev").click(function(e) {
   divs.eq(now).hide("slide", {
      direction: "right"
   }, 300);
   now = (now > 0) ? now - 1 : divs.length - 1;
   divs.eq(now).show("slide", {
      direction: "left"
   }, 300);
   updateCounter();
});
// Thumbnails (click)
$('#thumbnails img').on('click', function() {
   $('#thumbnails img').removeClass('active');
   $(this).addClass('active');
   var pos = $(this).position().left;
   var currentscroll = $("#thumbnails").scrollLeft();
   var divwidth = $("#thumbnails").width();
   pos = (pos + currentscroll) - (divwidth / 2);
   $('#thumbnails').animate({
      scrollLeft: pos
   });
});

Однако я безуспешно пытаюсь сделать следующее:

При щелчке по миниатюре: получить длину миниатюры. Затем скрыть текущий div с большой картинкой ('.expo') и после этого показать div с большой картинкой, имеющей ту же длину, что и эскиз, на котором был сделан щелчок.

Честно говоря, я не знаю, так ли это вообще -_- yikes!

Вы бы сказали, что это действительно самый удобный подход в данном случае? Каким будет более быстрый / более эффективный подход? Я очень хочу учиться!

РЕДАКТИРОВАТЬ Было бы проще, если бы я присвоил эскизам и изображениям аналогичный класс? или атрибут данных?

Answer 1

В зависимости от настроек на вашей странице вы можете показать большое изображение, соответствующее миниатюрам, используя index()

$("#thumbnails img").on("click", function() {
  let position = $("#thumbnails img").index(this);
  $("#big img").hide();
  $("#big img:eq(" + position + ")").show();
  $("#thumbnails img").removeClass("active");
  $(this).addClass("active");
});

#big img {
  display:none;
}
#big img.show {
  display:block;
}
#thumbnails {
  padding-top:50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="big">
  <img class="show" src="https://dummyimage.com/200x200/000000/fff">
  <img src="https://dummyimage.com/200x200/cecece/fff">
  <img src="https://dummyimage.com/200x200/e78765/fff">
</div>
<div id="thumbnails">
  <img class="active" src="https://dummyimage.com/50x50/000000/fff">
  <img src="https://dummyimage.com/50x50/cecece/fff">
  <img src="https://dummyimage.com/50x50/e78765/fff">
</div>

Если вместо этого вы хотите избежать страницы, содержащей так много больших изображений, я предлагаю переключиться на решение с использованием атрибута данных чтобы сохранить местоположение большого изображения и загрузить его, когда оно будет показано:

$("#thumbnails img").on("click", function() {
  let big = $(this).attr("data-image");
  $("#big img").attr("src", big);
  $("#thumbnails img").removeClass("active");
  $(this).addClass("active");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="big">
  <img src="https://dummyimage.com/200x200/000000/fff">
</div>
<div id="thumbnails">
  <img data-image="https://dummyimage.com/200x200/000000/fff" src="https://dummyimage.com/50x50/000000/fff">
  <img data-image="https://dummyimage.com/200x200/cecece/fff" src="https://dummyimage.com/50x50/cecece/fff">
  <img data-image="https://dummyimage.com/200x200/e78765/fff" src="https://dummyimage.com/50x50/e78765/fff">
</div>

Answer 2

Вам нужно будет поместить идентификатор на миниатюры, который позволит вам перейти к правильному изображению.

Вы хотите повторно использовать эту часть вашей предыдущей и следующей функции в вашем $('#thumbnails img').on('click',...:

   divs.eq(now).hide("slide", {
      direction: "right"
   }, 300);

   now = **whatever the number of the thumbnail you clicked on is**;
   // now = (now > 0) ? now - 1 : divs.length - 1;

   divs.eq(now).show("slide", {
      direction: "left"
   }, 300);
   updateCounter();

Ваша веб-страница также загружает все полноразмерные изображения, общий размер которых составляет 50–100 МБ, и загрузка занимает несколько минут.

Для правильного выполнения работы из этого я бы предложил изучить динамическую c загрузку и создание фактических эскизов на вашем сервере (чтобы клиент загружал изображения размером всего 100x100 пикселей и несколько КБ каждое)