Необходимо реализовать зум изображения как у Амазона, когда по клику на картинку она открывается во весь размер и картинка скользит вверх/вниз за курсором, дополнительно, скролл "фокусируется" на месте клика, приближая конкретное место. Вот ссылка для примера. Кликните по большой картинке, затем еще раз, чтобы вызвать зум. Я знаю, что мне нужно реализовать коллизию, как у них, посредством вычитания высоты оригинального изображения из высоты контейнера использовать получившееся число как предел... но я не понимаю, как это необходимо применить? Вот моя реализация:
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>
javascript image zoom and panning
. Примеров в интернете много на эту тему.