War Collections
Preserving the stories of the First and Second World Wars
test
.image-container {
position: relative;
overflow: hidden;
cursor: zoom-in; /* Default cursor to zoom-in */
}
.image-container img {
transition: transform 0.3s ease;
width: 100%;
}
.image-container.right-clicked {
cursor: zoom-out; /* Cursor for zoom-out when right-clicked */
}
function setImage() {
var img = document.getElementById("image");
img.src = this.value;
return false;
}
function setComparison() {
var img = document.getElementById("image2");
img.src = this.value;
return false;
}
document.getElementById("ManuscriptList").onchange = setImage;
document.getElementById("ManuscriptList2").onchange = setComparison;
let zoomLevels = {
'image': 1,
'image2': 1
};
function zoomImage(event, imageId) {
const img = document.getElementById(imageId);
const container = img.parentElement;
if (zoomLevels[imageId] < 5) { // Control the max zoom level
zoomLevels[imageId] += 1;
const rect = img.getBoundingClientRect();
const offsetX = event.clientX - rect.left;
const offsetY = event.clientY - rect.top;
const x = offsetX / rect.width * 100;
const y = offsetY / rect.height * 100;
img.style.transformOrigin = `${x}% ${y}%`;
img.style.transform = `scale(${zoomLevels[imageId]})`;
container.classList.remove('right-clicked'); // Remove right-clicked class
}
}
function unzoomImage(event, imageId) {
event.preventDefault();
if (zoomLevels[imageId] > 1) {
zoomLevels[imageId] -= 1;
const img = document.getElementById(imageId);
img.style.transform = `scale(${zoomLevels[imageId]})`;
}
const container = document.getElementById(imageId).parentElement;
container.classList.add('right-clicked'); // Add right-clicked class
}
function resetZoom(imageId) {
zoomLevels[imageId] = 1;
const img = document.getElementById(imageId);
img.style.transform = `scale(1)`;
const container = img.parentElement;
container.classList.remove('right-clicked'); // Remove the right-clicked class on reset
}
Browse: MS AMS BMS CMS DMS EMS FMS GMS HMS IMS Marsh |
Compare to: MS AMS BMS CMS DMS EMS FMS GMS HMS IMS Marsh |
|---|---|
| Note: Left click to Zoom in, Right click to Zoom out | |
| Reset Zoom for Image 1 | Reset Zoom for Image 2 |