2

Необходимо реализовать зум изображения как у Амазона, когда по клику на картинку она открывается во весь размер и картинка скользит вверх/вниз за курсором, дополнительно, скролл "фокусируется" на месте клика, приближая конкретное место. Вот ссылка для примера. Кликните по большой картинке, затем еще раз, чтобы вызвать зум. Я знаю, что мне нужно реализовать коллизию, как у них, посредством вычитания высоты оригинального изображения из высоты контейнера использовать получившееся число как предел... но я не понимаю, как это необходимо применить? Вот моя реализация:

const imgUrl =
  "https://images-na.ssl-images-amazon.com/images/I/71RxjEEZwkL._AC_SL1500_.jpg";

const trigger = document.getElementById("showImage");

trigger.addEventListener('click', () => {
  buildModal()
})

/**
 * Строим модал
 *
 */
function buildModal() {
  const modalBackdrop = document.createElement("div");
  modalBackdrop.classList.add("media-viewer-backdrop");

  const modal = document.createElement("div");
  modal.classList.add("media-viewer");

  modalBackdrop.appendChild(modal);

  const modalMain = document.createElement("div");
  modalMain.classList.add("media-viewer-main");

  const modalContent = document.createElement("div");
  modalContent.classList.add("media-viewer-main-content");
  modalContent.appendChild(setActiveContent());

  modalMain.appendChild(modalContent);

  modal.appendChild(modalMain);

  document.body.appendChild(modalBackdrop);
}

/**
 * Установить контент
 *
 */
function setActiveContent() {
  const tabContent = document.createElement("div");
  tabContent.classList.add("media-viewer-main-content-tab");
  tabContent.appendChild(show());

  return tabContent;
}

/**
 * Показать модал
 *
 */
function show() {
  const images = document.createElement("div");
  images.classList.add("media-viewer-main-content-viewer");

  const bigImage = new Image();
  bigImage.src = imgUrl;

  bigImage.classList.add("media-viewer-main-content-viewer-image");

  images.appendChild(bigImage);

  toggleZoom(images);

  return images;
}

/**
 * Включить/выключить зум
 *
 */
function toggleZoom(images) {
  images.addEventListener("click", (e) => {
    const target = e.target;

    if ("IMG" !== target.tagName) {
      return;
    }

    const zoomClass = "media-viewer-main-content-viewer-image__zoomed";

    target.classList.toggle(zoomClass);

    if (target.classList.contains(zoomClass)) {
      const limit = images.offsetHeight - target.offsetHeight;

      target.onmousemove = (event) => {
        if (event.clientY !== limit && event.clientY !== 0) {
          target.style.top = event.clientY + 1 + `px`;
        }
      };
    }
  });
}
.show-image {
  font-size: 21px;
}

.media-viewer {
  width: 100%;
  height: 100%;
  margin: 0 auto;
}

.media-viewer-backdrop {
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1600;
  overflow-y: scroll;
  display: flex;
  justify-content: center;
  align-content: stretch;
  align-items: center;
  background: rgba(0, 0, 0, 0.5);
}

.media-viewer-main {
  position: relative;
  box-shadow: rgba(0, 0, 0, 0.32) 0 16px 24px 0;
  max-width: 100%;
  min-width: 200px;
  background: white;
  margin: auto 0;
  width: 100%;
  height: 100%;
}

.media-viewer-main-header {
  z-index: 1000;
  position: relative;
  border-radius: 8px 8px 0 0;
  background: #F9F9F9;
}

.media-viewer-main-header-text {
  font-size: 20px;
  line-height: 22px;
  padding: 15px;
  margin: 0;
}

.media-viewer-main-header__close {
  position: absolute;
  right: 20px;
  top: 15px;
}

.media-viewer-main-content {
  z-index: 1000;
  position: relative;
  border-radius: 8px 8px 0 0;
}

.media-viewer-main-content-viewer {
  text-align: center;
  overflow: hidden;
  width: 100%;
  height: 764px;
  position: relative;
}

.media-viewer-main-content-viewer-image {
  height: calc(100vh - 174px);
  max-width: 100%;
  cursor: zoom-in;
}

.media-viewer-main-content-viewer-image__zoomed {
  cursor: zoom-out;
  height: auto;
  position: relative;
  transform: translate(0%, -50%);
  z-index: 1;
  margin: 0 auto;
}
<div class="show-image" id="showImage">
  show image
</div>

2
  • Погуглите javascript image zoom and panning. Примеров в интернете много на эту тему.
    – NoSkill
    Commented 31 авг. 2020 в 16:54
  • @NoSkill спасибо) с помощью гугла и такой то матери я таки смог его реализовать, добавил рабочий вариант в ответ Commented 1 сент. 2020 в 2:30

1 ответ 1

0

Я решил задачу, все, что нужно было сделать, переписать функцию toggleZoom вот так:

 /**
 * Toggling zoom
 *
 */
function toggleZoom(images) {
  images.addEventListener("click", (e) => {
    const target = e.target;

    if ("IMG" !== target.tagName) {
      return;
    }

    const zoomClass = "media-viewer-main-content-viewer-image__zoomed";

    target.classList.toggle(zoomClass);

    if (target.classList.contains(zoomClass)) {
      target.addEventListener("mousemove", (event) => {
        const x = event.offsetX;
        const y = event.offsetY;
        const w = target.offsetWidth;
        const h = target.offsetHeight;
        const originX = (x / w) * 100;
        const originY = (y / h) * 100;

        target.style.transformOrigin = originX + "% " + originY + "%";
      });
    }
  });
}

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.