interlope/bludit-blowfish
1
0 Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Improve image zoom functionality to skip small icons based on natural dimensions and enhance hover overlay effects

Browse Source
This commit is contained in:
interlope committed 2026-05-30 03:31:52 +02:00
1 parent f54c05bfbb
commit f8aabd35a6
2 files changed
+36 -14
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

css/style.css
+23 -10
View File
@@ -1227,26 +1227,39 @@ footer.footer-modern a:hover {
position: relative; position: relative;
display: inline-block; display: inline-block;
cursor: zoom-in; cursor: zoom-in;
/* clip the overlay to the image bounds */ overflow: hidden; /* clips both pseudo-elements to image bounds */
overflow: hidden;
} }
/* Full-image dark overlay with centred magnifier on hover. /* ::before — dark overlay */
Stroke-based SVG (24×24 viewBox, no fill) stays crisp at any rendered size. */ .zoomable-wrap::before {
.zoomable-wrap::after {
content: ''; content: '';
position: absolute; position: absolute;
inset: 0; inset: 0;
background-color: rgba(0, 0, 0, 0.38); background: rgba(0, 0, 0, 0.38);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3Cline x1='11' y1='8' x2='11' y2='14'/%3E%3Cline x1='8' y1='11' x2='14' y2='11'/%3E%3C/svg%3E");
background-position: center;
background-size: min(44px, 25%);
background-repeat: no-repeat;
opacity: 0; opacity: 0;
transition: opacity 0.2s ease; transition: opacity 0.2s ease;
pointer-events: none; pointer-events: none;
z-index: 1;
} }
/* ::after — stroke-based magnifier, centred, fixed 36 px.
Strokes render as vectors so no pixelation at any display size. */
.zoomable-wrap::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 36px;
height: 36px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3Cline x1='11' y1='8' x2='11' y2='14'/%3E%3Cline x1='8' y1='11' x2='14' y2='11'/%3E%3C/svg%3E") center / contain no-repeat;
opacity: 0;
transition: opacity 0.2s ease;
pointer-events: none;
z-index: 2;
}
.zoomable-wrap:hover::before,
.zoomable-wrap:hover::after { .zoomable-wrap:hover::after {
opacity: 1; opacity: 1;
} }
index.php
+13 -4
View File
@@ -368,16 +368,25 @@
document.body.style.overflow = ''; document.body.style.overflow = '';
} }
Array.prototype.forEach.call(images, function (el) { function wrapImage(el) {
// Skip icons / tiny images — not worth zooming // Skip icons / tiny images using natural dimensions (reliable after load)
if (el.offsetWidth < 80 && el.offsetHeight < 80) return; if (el.naturalWidth > 0 && el.naturalWidth < 100) return;
if (el.naturalHeight > 0 && el.naturalHeight < 100) return;
// Wrap in a span so CSS can attach the hover overlay via ::after
var wrap = document.createElement('span'); var wrap = document.createElement('span');
wrap.className = 'zoomable-wrap'; wrap.className = 'zoomable-wrap';
el.parentNode.insertBefore(wrap, el); el.parentNode.insertBefore(wrap, el);
wrap.appendChild(el); wrap.appendChild(el);
el.addEventListener('click', function () { open(el.src, el.alt); }); el.addEventListener('click', function () { open(el.src, el.alt); });
}
Array.prototype.forEach.call(images, function (el) {
// If already loaded (e.g. from cache) act immediately; otherwise wait
if (el.complete && el.naturalWidth) {
wrapImage(el);
} else {
el.addEventListener('load', function () { wrapImage(el); });
}
}); });
overlay.addEventListener('click', close); overlay.addEventListener('click', close);