Salut,
Il aurait fallu que tu crées un nouveau sujet. Je ne regarde pas toujours les dernières réponses dans le forum.
Pour répondre à ton souci, autant faire un
webcomponent comme
ceci. Le codepen est ici :
https://codepen.io/niuxe/pen/wBGaYEG
le html (index.html):
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Titre du document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.9.0/dist/css/foundation-float.min.css" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.9.0/dist/css/foundation-prototype.min.css" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.9.0/dist/css/foundation-rtl.min.css" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<main class="grid-container margin-top-3">
<zoomable-image src="https://picsum.photos/id/145/400/300" />
</main>
<script src="app.js"></script>
</body>
</html>
le css (styles.css) :
.zoomable-image {
display: inline-block;
border: 1px solid red;
overflow: hidden;
cursor: grab;
width: 400px;
height: 300px;
position: relative;
img {
display: block;
margin: auto;
user-select: none;
pointer-events: none;
transform-origin: center center;
transition: transform 0.1s ease-out;
}
}
le js (app.js):
class ZoomableImage extends HTMLElement {
constructor() {
super()
this.img = document.createElement('img')
this.appendChild(this.img)
this.currentScale = 1
this.pos = { x: 0, y: 0 }
this.start = { x: 0, y: 0 }
this.isDragging = false
}
connectedCallback() {
if (this.hasAttribute('src')) {
this.img.src = this.getAttribute('src')
}
this.classList.add('zoomable-image')
this.bindEvents()
}
bindEvents() {
this.addEventListener('wheel', e => this.onWheel(e))
this.addEventListener('mousedown', e => this.onMouseDown(e))
this.addEventListener('mousemove', e => this.onMouseMove(e))
this.addEventListener('mouseup', () => this.onMouseUp())
this.addEventListener('mouseleave', () => this.onMouseLeave())
}
onWheel(e) {
e.preventDefault()
const MIN_SCALE = 1
const MAX_SCALE = 5
const zoomSpeed = 0.0015
const oldScale = this.currentScale
this.currentScale -= e.deltaY * zoomSpeed
this.currentScale = Math.min(Math.max(this.currentScale, MIN_SCALE), MAX_SCALE)
const rect = this.getBoundingClientRect()
const dx = e.clientX - rect.left - rect.width / 2
const dy = e.clientY - rect.top - rect.height / 2
this.pos.x -= dx * (this.currentScale / oldScale - 1)
this.pos.y -= dy * (this.currentScale / oldScale - 1)
this.updateTransform()
}
onMouseDown(e) {
if (this.currentScale <= 1) return
this.isDragging = true
this.start.x = e.clientX - this.pos.x
this.start.y = e.clientY - this.pos.y
this.style.cursor = 'grabbing'
}
onMouseMove(e) {
if (!this.isDragging) return
this.pos.x = e.clientX - this.start.x
this.pos.y = e.clientY - this.start.y
this.updateTransform()
}
onMouseUp() {
this.isDragging = false
this.style.cursor = 'grab'
}
onMouseLeave() {
this.isDragging = false
this.style.cursor = 'grab'
}
updateTransform() {
if (this.currentScale === 1) {
this.pos.x = 0
this.pos.y = 0
}
this.img.style.transform = `translate(${this.pos.x}px, ${this.pos.y}px) scale(${this.currentScale})`
}
}
customElements.define('zoomable-image', ZoomableImage)
Modifié par Niuxe (12 Nov 2025 - 14:51)
