JQuery Zoom, масштабирует только одно изображение при наведении

Question

Я пытаюсь сделать страницу товара с галереей (кликабельные маленькие миниатюры сбоку), которая открывает большое изображение с правой стороны. Jquery zoom отображает только масштаб на первом изображении, когда отображаются другие изображения, масштаб остается на первом изображении.

Вот мойкод: HTML

<section class="product-page">
        <div class="thumbnails">
            <div class="thumb"><a href="#"><img src="img/nike/shoes/Air-force1/Thumbnails/thumb-air-force-right-side.png" alt="thumb-air-force-right-side" onclick="right()"></a></div>
            <div class="thumb"><a href="#"><img src="img/nike/shoes/Air-force1/Thumbnails/thumb-air-force-left-side.png" alt="thumb-air-force-left-side" onclick="left()"></a></div>
            <div class="thumb"><a href="#"><img src="img/nike/shoes/Air-force1/Thumbnails/thumb-air-force-bottom-side.png" alt="thumb-air-force-bottom-side" onclick="bottom()"></a></div>
            <div class="thumb"><a href="#"><img src="img/nike/shoes/Air-force1/Thumbnails/thumb-air-force-pair-side.png" alt="thumb-air-force-pair-side" onclick="pairSide()"></a></div>
            <div class="thumb"><a href="#"><img src="img/nike/shoes/Air-force1/Thumbnails/thumb-air-force-pair-top.png" alt="thumb-air-force-pair-top" onclick="pairTop()"></a></div>
        </div>
        <div class="img-display">
            <span class='zoom' id='shoe1'>
                <img id="img-area" src="img/nike/shoes/Air-force1/air-force-right-side.png" alt="air-force-right-side" width="320" height="320">
            </span>
            <span class='zoom1' id='shoe1'>
                <img class="hidden" id="img-area" src="img/nike/shoes/Air-force1/air-force-left-side.png" alt="air-force-left-side" width="320" height="320">
            </span>
            <span class='zoom' id='shoe3'>
                <img class="hidden" id="img-area" src="img/nike/shoes/Air-force1/air-force-bottom-side.png" alt="air-force-bottom-side">
            </span>
            <span class='zoom' id='shoe4'>
                <img class="hidden" id="img-area" src="img/nike/shoes/Air-force1/air-force-pair-side.png" alt="air-force-pair-side">
            </span>
            <span class='zoom' id='shoe5'>
                <img class="hidden" id="img-area" src="img/nike/shoes/Air-force1/air-force-pair-top.png" alt="air-force-pair-top">
            </span>
        </div>
    </section>

JS для изменения изображения при нажатии на миниатюру изображения

    var img = document.getElementById("img-area");
        function right(){
            img.src='img/nike/shoes/Air-force1/air-force-right-side.png';
        }
        function left(){
            img.src='img/nike/shoes/Air-force1/air-force-left-side.png';
        }
        function bottom(){
            img.src='img/nike/shoes/Air-force1/air-force-bottom-side.png';
        }
        function pairSide(){
            img.src='img/nike/shoes/Air-force1/air-force-pair-side.png';
        }
        function pairTop(){
            img.src='img/nike/shoes/Air-force1/air-force-pair-top.png';
        }

и код Jquery

$(document).ready(function(){
    $('#shoe1').zoom();
    $('#shoe2').zoom();
    $('#shoe3').zoom();
    $('#shoe4').zoom();
    $('#shoe5').zoom();
});

Как сделать измененное изображениеувеличить при наведении? Заранее спасибо.

Answer 1

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

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

Ваш img-display должен рассматриваться как холст. Свяжите один обработчик событий со ссылками, обернутыми вокруг больших пальцев. Атрибут href содержит увеличенное изображение, которое вы хотите загрузить в область холста. Этот обработчик событий просто поворачивает ваши миниатюры, но использует большее изображение и передает его как на изображение холста, так и в API плагина масштабирования jQuery, в то же время переключая активные состояния больших пальцев (в качестве эстетического предложения).

Почему href? Например, программы чтения с экрана все еще должны иметь возможность переходить по этим ссылкам. Я думаю о доступности ftw.

Изображения предоставлены JD Sports .

$(function() {
  $('.zoom').zoom();
  $('.thumb').on('click', 'a', function(e) {
    e.preventDefault();
    var thumb = $(e.delegateTarget);
    if (!thumb.hasClass('active')) {
      thumb.addClass('active').siblings().removeClass('active');
      $('.zoom')
        .zoom({
          url: this.href
        })
        .find('img').attr('src', this.href);
    }
  });
});

img {
  display: block;
  height: auto;
  max-width: 100%;
}

.product-page {
  display: flex;
}

.img-display {
  flex-grow: 1;
  max-width: 372px;
}

.thumb {
  opacity: .7;
  margin: 0 .25rem .25rem 0;
  width: 120px;
  transition: opacity .25s ease-out;
}

.thumb:hover,
.thumb.active {
  opacity: 1;
}

.zoom {
  display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-zoom/1.7.21/jquery.zoom.min.js"></script>

<section class="product-page">
  <div class="thumbnails">
    <div class="thumb active">
      <a href="https://i8.amplience.net/i/jpl/jd_334285_a?qlt=92&w=750&h=531&v=1">
        <img src="https://i8.amplience.net/i/jpl/jd_334285_a?qlt=92&w=750&h=531&v=1" alt="thumb-air-force-right-side">
      </a>
    </div>
    <div class="thumb">
      <a href="https://i8.amplience.net/i/jpl/jd_334285_b?qlt=92&w=950&h=673&v=1">
        <img src="https://i8.amplience.net/i/jpl/jd_334285_b?qlt=92&w=950&h=673&v=1" alt="thumb-air-force-left-side">
      </a>
    </div>
    <div class="thumb">
      <a href="https://i8.amplience.net/i/jpl/jd_334285_e?qlt=92&w=950&h=673&v=1">
        <img src="https://i8.amplience.net/i/jpl/jd_334285_e?qlt=92&w=950&h=673&v=1" alt="thumb-air-force-bottom-side">
      </a>
    </div>
  </div>
  <div class="img-display">
    <span class="zoom">
      <img src="https://i8.amplience.net/i/jpl/jd_334285_a?qlt=92&w=750&h=531&v=1" alt="">
    </span>
  </div>
</section>