feat(image-zoom): add minimal image zoom functionality

- Introduced CSS for image zoom overlay and image styling.
- Implemented JavaScript for handling image zoom interactions, including overlay creation and close functionality.
- Updated configuration to enable image zoom feature in site parameters.
- Added partial for including image zoom assets in the layout.
This commit is contained in:
Xin
2025-09-10 23:59:51 +01:00
parent 3bc454bbf6
commit 09728a4aa9
5 changed files with 141 additions and 0 deletions

View File

@@ -0,0 +1,42 @@
/* Minimal styles for Hextra image zoom overlay */
.hextra-zoom-image-overlay {
position: fixed;
inset: 0;
background: var(--hextra-image-zoom-backdrop, rgba(0, 0, 0, 0.9));
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
opacity: 0;
transition: opacity 0.25s ease-out;
cursor: zoom-out;
}
.hextra-zoom-image-overlay.show {
opacity: 1;
}
.hextra-zoom-image {
max-width: min(95vw, 1200px);
max-height: 95vh;
border-radius: 8px;
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35);
transition: transform 0.3s ease-out;
transform: scale(0.98);
}
.hextra-zoom-image-overlay.show .hextra-zoom-image {
transform: scale(1);
}
@media (prefers-reduced-motion: reduce) {
.hextra-zoom-image-overlay,
.hextra-zoom-image {
transition: none !important;
}
}
/* Show magnifier cursor over zoomable images in content */
.content img:not([data-no-zoom]) {
cursor: zoom-in;
}