<!-- Script for image zoom -->
<script>
document.addEventListener("DOMContentLoaded", function () {
const overlay = document.createElement("div");
overlay.className = "image-zoom-overlay";
document.body.appendChild(overlay);
const closeButton = document.createElement("div");
closeButton.className = "image-zoom-close";
closeButton.innerHTML = "×";
closeButton.title = "Schließen";
overlay.appendChild(closeButton);
const zoomedImg = document.createElement("img");
overlay.appendChild(zoomedImg);
const zoomIconSVG = `
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="11" cy="11" r="8"></circle>
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
<line x1="11" y1="8" x2="11" y2="14"></line>
<line x1="8" y1="11" x2="14" y2="11"></line>
</svg>
`;
function initImageZoom() {
const contentImages = document.querySelectorAll(
".contents img, .wiki-content img, .content-area img, main img"
);
contentImages.forEach((img) => {
if (
!img.closest(".no-zoom") &&
!img.classList.contains("zoom-processed")
) {
img.classList.add("zoom-processed");
if (
img.parentElement &&
img.parentElement.classList.contains("zoomable-image")
) {
img.parentElement.replaceWith(img);
}
const imgWrapper = document.createElement("div");
imgWrapper.className = "zoomable-image";
img.parentNode.insertBefore(imgWrapper, img);
imgWrapper.appendChild(img);
const indicator = document.createElement("div");
indicator.className = "zoom-indicator";
indicator.innerHTML = zoomIconSVG;
imgWrapper.appendChild(indicator);
img.addEventListener("click", function (e) {
e.preventDefault();
e.stopPropagation();
zoomedImg.src = this.src;
overlay.classList.add("active");
document.body.style.overflow = "hidden"; // Scrolling verhindern
});
img.style.cursor = "zoom-in";
}
});
}
overlay.addEventListener("click", function () {
overlay.classList.remove("active");
document.body.style.overflow = ""; // Scrolling wieder aktivieren
});
zoomedImg.addEventListener("click", function (e) {
e.stopPropagation();
});
document.addEventListener("keydown", function (e) {
if (e.key === "Escape" && overlay.classList.contains("active")) {
overlay.classList.remove("active");
document.body.style.overflow = "";
}
});
setTimeout(function () {
initImageZoom();
console.log("Zoom-Funktion mit cursor-Hinweis initialisiert");
}, 800);
const observer = new MutationObserver(function (mutations) {
let shouldInit = false;
mutations.forEach(function (mutation) {
if (mutation.addedNodes.length) {
shouldInit = true;
}
});
if (shouldInit) {
initImageZoom();
}
});
const observerConfig = { childList: true, subtree: true };
observer.observe(document.body, observerConfig);
setInterval(initImageZoom, 5000);
});
</script>
AND CSS
/* Overlay für gezoomte Bilder */
.image-zoom-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.image-zoom-overlay.active {
opacity: 1;
pointer-events: auto;
}
/* Stil für das gezoomte Bild */
.image-zoom-overlay img {
max-width: 90%;
max-height: 90%;
object-fit: contain;
transform: scale(0.9);
transition: transform 0.3s ease;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
}
.image-zoom-overlay.active img {
transform: scale(1);
}
/* Verbesserte Cursor-Styles für klickbare Bilder */
.contents img,
.wiki-content img,
.content-area img,
main img {
cursor: zoom-in !important; /* Der wichtigste Teil: Zeigt Zoom-Cursor */
transition: transform 0.2s ease, filter 0.2s ease;
}
.contents img:hover,
.wiki-content img:hover,
.content-area img:hover,
main img:hover {
transform: scale(1.02);
filter: brightness(1.05);
}
/* Optionaler Zoom-Indikator in der Ecke */
.zoomable-image {
position: relative;
display: inline-block;
}
.zoom-indicator {
position: absolute;
bottom: 8px;
right: 8px;
background-color: rgba(0, 0, 0, 0.6);
color: white;
border-radius: 50%;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
opacity: 0;
transition: opacity 0.2s ease;
pointer-events: none; /* Damit der Indikator Klicks nicht abfängt */
}
.zoomable-image:hover .zoom-indicator {
opacity: 1;
}
/* Schließen-Button */
.image-zoom-close {
position: absolute;
top: 20px;
right: 20px;
color: white;
font-size: 30px;
cursor: pointer;
opacity: 0.7;
transition: opacity 0.2s;
}
.image-zoom-close:hover {
opacity: 1;
}