Hi,
I have a large JPG in a container div. The goal is to show the original image in a smaller container, then the user can click on it and it zooms in and can pan around the image.
The issue I see is that the panning or dragging is dragging the image further than the bounding container.
See attached images:
I tried to add code, but the post errored out
Not sure what you meant by “the post errored out”. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.
See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').
Thank you. It said as a new user I could only have one uploaded image.
I had also include my code and it showed an error when posting.
Here is the code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Zoomable and Scrollable Image</title>
<style>
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #f0f0f0;
}
#image-container {
width: 80%;
height: 80%;
overflow: ;
position: relative;
border: 2px solid #ccc;
background-color: #fff;
}
#image-wrapper {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
#image {
cursor: grab;
object-fit: cover;
}
</style>
</head>
<body>
<div id="image-container">
<div id="image-wrapper">
<img id="image" src="images/tri4K.jpg" alt="Large Image">
</div>
</div>
<script src="https://unpkg.com/panzoom@9.4.0/dist/panzoom.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
const imageContainer = document.getElementById('image-container');
const image = document.getElementById('image');
const panzoomInstance = panzoom(image, {
maxScale: 5,
contain: 'outside',
boundsL:true,
boundsPadding:0.1
});
const updateBounds = () => {
const containerRect = imageContainer.getBoundingClientRect();
const imageRect = image.getBoundingClientRect();
const panzoomRect = panzoomInstance.getPan();
// Calculate bounds
const minX = containerRect.width - imageRect.width * panzoomInstance.getScale();
const minY = containerRect.height - imageRect.height * panzoomInstance.getScale();
const maxX = 0;
const maxY = 0;
// Correct pan values to keep within bounds
if (panzoomRect.x > maxX) {
panzoomInstance.pan(maxX, panzoomRect.y, { force: true });
} else if (panzoomRect.x < minX) {
panzoomInstance.pan(minX, panzoomRect.y, { force: true });
}
if (panzoomRect.y > maxY) {
panzoomInstance.pan(panzoomRect.x, maxY, { force: true });
} else if (panzoomRect.y < minY) {
panzoomInstance.pan(panzoomRect.x, minY, { force: true });
}
};
// Bind zoom event
imageContainer.addEventListener('wheel', (event) => {
panzoomInstance.zoomWithWheel(event);
updateBounds();
});
// Bind pan events
image.addEventListener('mousedown', () => {
image.style.cursor = 'grabbing';
});
image.addEventListener('mouseup', () => {
image.style.cursor = 'grab';
updateBounds();
});
image.addEventListener('mouseleave', () => {
image.style.cursor = 'grab';
updateBounds();
});
// Bind double click to zoom
imageContainer.addEventListener('dblclick', (e) => {
const rect = image.getBoundingClientRect();
const offsetX = e.clientX - rect.left;
const offsetY = e.clientY - rect.top;
panzoomInstance.zoomIn({ animate: true });
panzoomInstance.pan(-offsetX, -offsetY);
updateBounds();
});
// Update bounds initially
updateBounds();
});
</script>
</body>
</html>
hi there!
the overflow property has no value.
My bad, that was me playing with different options.
Should be overflow: hidden;, but not sure what it would be to solve my issue.