<script>
document.addEventListener("DOMContentLoaded", function () {
const contents=document.querySelector('.contents'); if(!contents)return;
const overlay=document.createElement("div");
overlay.className = "image-zoom-overlay";
contents.appendChild(overlay);
const closeButton = document.createElement("div");
closeButton.className = "image-zoom-close";
closeButton.innerHTML = "×"; closeButton.title = "Close";
overlay.appendChild(closeButton);
const downloadButton = document.createElement("a");
downloadButton.className = "image-zoom-download";
downloadButton.title="Download image (D)";
downloadButton.innerHTML =
`<svg style="width:23px;height:23px" viewBox="0 0 24 24"><path fill="white" d="M5,20H19A1,1 0 0,0 20,19V17H18V19H6V17H4V19A1,1 0 0,0 5,20M19,9H16V3H8V9H5L12,16L19,9Z" /></svg>`;
overlay.appendChild(downloadButton);
const topControls=document.createElement("div");
topControls.className = "image-zoom-top-controls";
overlay.appendChild(topControls);
const fitBtn=document.createElement("button");
fitBtn.className = "image-zoom-fit";
fitBtn.innerHTML="Fit";
fitBtn.title="Fit to screen (F)";
topControls.appendChild(fitBtn);
const fillBtn=document.createElement("button");
fillBtn.className = "image-zoom-fill";
fillBtn.innerHTML="Fill";
fillBtn.title="Fill the window (scale to the largest side) (Z)";
topControls.appendChild(fillBtn);
const origBtn=document.createElement("button");
origBtn.className = "image-zoom-original";
origBtn.innerHTML="Original";
origBtn.title="Show original size (1:1) (O)";
topControls.appendChild(origBtn);
const zoomInButton=document.createElement("div");
zoomInButton.className="image-zoom-in"; zoomInButton.innerHTML="+";
zoomInButton.title="Zoom In (+)";
topControls.appendChild(zoomInButton);
const zoomOutButton=document.createElement("div");
zoomOutButton.className="image-zoom-out"; zoomOutButton.innerHTML="−";
zoomOutButton.title="Zoom Out (−)";
topControls.appendChild(zoomOutButton);
const rotateButton=document.createElement("button");
rotateButton.className = "image-zoom-rotate";
rotateButton.title = "Rotate (R)";
rotateButton.innerHTML = `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22" width="40" height="40" style="display:block">
<path d="M16.59 5.41A7 7 0 1 0 18 11" fill="none" stroke="#fff" stroke-width="2.2"/>
<polyline points="18,4 18,10 12,10" fill="none" stroke="#63cafb" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
`;
topControls.appendChild(rotateButton);
const hotkeysBtn=document.createElement("button");
hotkeysBtn.className="image-zoom-hotkeys";
hotkeysBtn.title="Hotkeys Help";
hotkeysBtn.innerHTML="❔";
topControls.appendChild(hotkeysBtn);
let hotkeysModal=null;
const leftArrow=document.createElement("div"); leftArrow.className="image-zoom-left"; leftArrow.innerHTML="←"; overlay.appendChild(leftArrow);
const rightArrow=document.createElement("div");rightArrow.className="image-zoom-right";rightArrow.innerHTML="→";overlay.appendChild(rightArrow);
const counter=document.createElement("div"); counter.className="image-zoom-counter"; overlay.appendChild(counter);
const zoomedImg=document.createElement("img"); overlay.appendChild(zoomedImg);
const thumbsBarOuter=document.createElement('div');
thumbsBarOuter.className = "image-zoom-thumbs-bar-outer";
overlay.appendChild(thumbsBarOuter);
const thumbsBar=document.createElement('div');thumbsBar.className = "image-zoom-thumbs-bar";thumbsBarOuter.appendChild(thumbsBar);
let collapseBtn = document.createElement("button");
collapseBtn.className = "image-zoom-thumbs-collapse-btn";
collapseBtn.type = "button";
collapseBtn.title = "Collapse/expand thumbnail bar (T)";
collapseBtn.innerHTML = '<span style="pointer-events:none;1">▲</span>';
thumbsBarOuter.appendChild(collapseBtn);
let collapseBtnFixed = null;
let fixBtnTimeout = null;
const spinner=document.createElement("div");
spinner.className = "image-zoom-spinner";
overlay.appendChild(spinner);
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>`;
let zoomableImages = [], currentIndex = 0, scale = 1, panX = 0, panY = 0, rotation = 0;
const SCALE_STEP = 0.2, SCALE_MIN = 0.3, SCALE_MAX = 2.5;
let isPanning = false, startX=0, startY=0, startPanX=0, startPanY=0;
const CONTENT_IMAGE_SELECTOR = '.content-area img, .wiki-content img, main img';
const PROCESSED_IMAGE_SELECTOR = '.content-area img.zoom-processed, .wiki-content img.zoom-processed, main img.zoom-processed';
let mode = "fit"; let thumbsCollapsed = false;
let fillBtnRemember = "right";
let lastActiveBtn="fit";
const FILLBTN_POS_KEY = "zoom-fill-btn-pos";
try{if(localStorage[FILLBTN_POS_KEY])fillBtnRemember=localStorage[FILLBTN_POS_KEY];}catch(e){}
function updateFillBtnPos(side) {
fillBtnRemember = side;
try{ localStorage[FILLBTN_POS_KEY] = side; }catch(e){}
if(side==="right") {
if(fillBtn.parentNode) topControls.removeChild(fillBtn);
topControls.insertBefore(fillBtn, origBtn.nextSibling);
} else {
if(fillBtn.parentNode) topControls.removeChild(fillBtn);
topControls.insertBefore(fillBtn, fitBtn.nextSibling);
}
}
fillBtn.addEventListener('contextmenu',function(e){
e.preventDefault();
updateFillBtnPos(fillBtnRemember==="left" ? "right":"left");
});
function showHotkeysModal() {
if (hotkeysModal) return;
hotkeysModal = document.createElement('div');
hotkeysModal.className = "image-zoom-hotkeys-modal";
hotkeysModal.innerHTML = `
<div class="close-modal" title="Close">×</div>
<strong>Hotkeys:</strong>
<ul>
<li><code>← / →</code> — Next / Previous image</li>
<li><code>F</code> — <span class="c">Fit to screen</span></li>
<li><code>O</code> — <span class="c">Original size</span></li>
<li><code>Z</code> — <span class="c">Fill window</span></li>
<li><code>D</code> — <span class="c">Download</span> current image</li>
<li><code>C</code> — <span class="c">Copy link</span></li>
<li><code>R</code> — <span class="r">Rotate</span></li>
<li><code>+ / -</code> — <span class="k">Zoom In / Out</span></li>
<li><code>T</code> — <span class="k">Collapse/expand bar</span></li>
<li><code>Esc</code> — <span class="k">Close</span></li>
<li><code>Wheel</code> — <span class="k">Zoom</span> (on image) / <span class="k">Scroll bar</span> (on bar)</li>
</ul>
`;
overlay.appendChild(hotkeysModal);
document.body.style.overflow='hidden';
hotkeysModal.querySelector('.close-modal').onclick = closeHotkeysModal;
hotkeysModal.addEventListener("mousedown",(e)=>e.stopPropagation());
setTimeout(()=>document.addEventListener('mousedown',closeHotkeysModalEscape),1);
}
function closeHotkeysModal() {
try{ document.body.style.overflow=''; }catch(e){}
if(hotkeysModal) hotkeysModal.remove();
hotkeysModal = null;
document.removeEventListener('mousedown',closeHotkeysModalEscape);
}
function closeHotkeysModalEscape(e){
if(!hotkeysModal) return;
if(!hotkeysModal.contains(e.target)) closeHotkeysModal();
}
hotkeysBtn.addEventListener("click",function(e){
e.stopPropagation(); showHotkeysModal();
});
setTimeout(()=>updateFillBtnPos(fillBtnRemember),1);
// Fixed button to restore the thumbnail bar
function showCollapsedThumbsBtn() {
if (collapseBtnFixed) return;
collapseBtnFixed = document.createElement("button");
collapseBtnFixed.type = "button";
collapseBtnFixed.className = "image-zoom-thumbs-collapse-btn-fixed";
collapseBtnFixed.innerHTML = '<span style="pointer-events:none;">▼</span>';
collapseBtnFixed.title = "Expand thumbnail bar (T)";
collapseBtnFixed.onclick = function(e){
e.stopPropagation();
setThumbsBarCollapsed(false);
};
document.body.appendChild(collapseBtnFixed);
}
function hideCollapsedThumbsBtn() {
if (collapseBtnFixed) {
collapseBtnFixed.remove();
collapseBtnFixed = null;
}
}
function setThumbsBarCollapsed(state, manual) {
thumbsCollapsed = !!state;
thumbsBarOuter.classList.toggle("collapsed", thumbsCollapsed);
collapseBtn.innerHTML = thumbsCollapsed ? '<span style="pointer-events:none;1">▼</span>' : '<span style="pointer-events:none;1">▲</span>';
collapseBtn.title = thumbsCollapsed
? "Expand thumbnail bar (T)" : "Collapse thumbnail bar (T)";
if (thumbsCollapsed) {
showCollapsedThumbsBtn();
} else {
hideCollapsedThumbsBtn();
}
}
collapseBtn.onclick = function(e){
e.stopPropagation(); setThumbsBarCollapsed(true,true);
};
collapseBtn.onmousedown=(e)=>e.stopPropagation();
function checkCollapseThumbs() {
if(zoomableImages.length<4) setThumbsBarCollapsed(true,false);
// else setThumbsBarCollapsed(false); // Auto-expanding is disabled.
}
function closeAllModals() { closeHotkeysModal(); hideCollapsedThumbsBtn(); }
// ========== FIX TO ACCOUNT FOR THE TOP CONTROLS BAR ==========
function getWorkingHeight() {
var controls = overlay.querySelector('.image-zoom-top-controls');
var controlsHeight = controls ? (controls.offsetHeight + controls.offsetTop) : 0;
// Leave some space at the bottom (e.g., for the thumbnail bar)
return window.innerHeight - controlsHeight - 16;
}
// ====================================================================
function initImageZoom() {
const contentImages = contents.querySelectorAll(CONTENT_IMAGE_SELECTOR);
contentImages.forEach((img) => {
if(img.closest('.image-zoom-overlay')) return;
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();
if(overlay.classList.contains("active")) return;
zoomableImages = Array.from(contents.querySelectorAll(PROCESSED_IMAGE_SELECTOR));
currentIndex = zoomableImages.indexOf(this);
showZoomedImage();
overlay.classList.add("active");
document.body.style.overflow = "hidden";
});
}
});
zoomableImages = Array.from(contents.querySelectorAll(PROCESSED_IMAGE_SELECTOR));
checkCollapseThumbs();
}
function showZoomedImage() {
if(!zoomableImages.length||currentIndex<0) return;
spinner.style.display = "block";
zoomedImg.style.visibility="hidden";
zoomedImg.classList.remove('zoomed-hover');
rotation = rotation%360;
zoomedImg.onload = function(){
zoomedImg.style.visibility="";
spinner.style.display="none";
restoreModeState();
};
zoomedImg.onerror = function(){spinner.style.display="none";}
zoomedImg.src = zoomableImages[currentIndex].src;
updateDownloadHref();
counter.textContent = `${currentIndex + 1} of ${zoomableImages.length}`;
// --- HIDE ARROWS if only 1 image ---
if (zoomableImages.length <= 1) {
leftArrow.classList.add('hidden');
rightArrow.classList.add('hidden');
} else {
leftArrow.classList.remove('hidden');
rightArrow.classList.remove('hidden');
}
renderThumbsBar();
}
function restoreModeState() {
if(mode==='fit') setFit(false);
else if(mode==='original') setOriginal(false);
else if(mode==='fill') setFill(false);
else updateImageScale(false);
}
function renderThumbsBar() {
thumbsBar.innerHTML = '';
zoomableImages.forEach((img, idx) => {
const thumb = document.createElement('div');
thumb.className = "image-zoom-thumb"+(idx===currentIndex?" current":"");
const thumbImg = document.createElement('img');
thumbImg.src = img.src; thumb.appendChild(thumbImg);
thumb.addEventListener('click', function(e){
e.stopPropagation();
if(idx!==currentIndex) { currentIndex = idx; showZoomedImage();}
});
thumbsBar.appendChild(thumb);
});
setTimeout(centerCurrentThumb, 60);
}
function centerCurrentThumb() {
if(thumbsCollapsed) return;
const thumbs = thumbsBar.querySelectorAll('.image-zoom-thumb');
if(!thumbs.length) return;
const currentEl = thumbs[currentIndex];
if(!currentEl) return;
const barRect = thumbsBarOuter.getBoundingClientRect();
const curRect = currentEl.getBoundingClientRect();
const offset = curRect.left - barRect.left - (barRect.width/2 - curRect.width/2);
thumbsBar.scrollBy({left: offset, behavior: 'smooth'});
}
function updateDownloadHref(){
downloadButton.href = zoomedImg.src;
downloadButton.setAttribute('download', zoomedImg.src.split('/').pop()||"image.jpg");
}
// ---- "Fill" - fits to the largest side without overflowing the screen:
function getBestFitScale(fitMode) {
if (!zoomedImg.naturalWidth) return 1;
let w0 = window.innerWidth, h0 = getWorkingHeight();
let w = zoomedImg.naturalWidth, h = zoomedImg.naturalHeight;
// For rotation, swap W/H!
let angle = (rotation%180===90||rotation%180===-90)?true:false;
if(angle) { let t=w; w=h; h=t; }
if(fitMode==="fill") {
// We fit to the largest side, but don't go beyond the boundaries!
let sw = w0/w, sh = h0/h;
return Math.max(Math.min(sw,sh), Math.min(w0/w, h0/h), 1);
}
let sw = w0/w, sh = h0/h;
return Math.min(sw,sh,1);
}
function setFit(updateBtn=true) {
mode = "fit"; lastActiveBtn="fit";
scale = getBestFitScale("fit");
panX = 0; panY = 0;
updateImageScale(true);
if(updateBtn){
fitBtn.classList.add('active'); origBtn.classList.remove('active'); fillBtn.classList.remove('active');
}
}
function setOriginal(updateBtn=true) {
mode = "original"; lastActiveBtn="original";
scale = 1; panX=0; panY=0;
updateImageScale(true);
if(updateBtn){
fitBtn.classList.remove('active'); origBtn.classList.add('active'); fillBtn.classList.remove('active');
}
}
function setFill(updateBtn=true) {
mode = "fill"; lastActiveBtn="fill";
scale = getBestFitScale("fill");
panX=0; panY=0;
updateImageScale(true);
if(updateBtn){
fitBtn.classList.remove('active'); origBtn.classList.remove('active'); fillBtn.classList.add('active');
}
}
// Clamp panning
function clampPan() {
if (!zoomedImg.naturalWidth) return;
let w = zoomedImg.naturalWidth, h = zoomedImg.naturalHeight;
let angle = (rotation % 180 === 90 || rotation % 180 === -90);
if (angle) { let t = w; w = h; h = t; }
let fullW = w * scale, fullH = h * scale;
let winW = window.innerWidth, winH = getWorkingHeight();
let maxDeltaX = Math.max(0, (fullW - winW) / 2);
let maxDeltaY = Math.max(0, (fullH - winH) / 2);
panX = Math.max(-maxDeltaX, Math.min(maxDeltaX, panX));
panY = Math.max(-maxDeltaY, Math.min(maxDeltaY, panY));
}
function updateImageScale(transition=true) {
clampPan();
zoomedImg.style.transform =
`scale(${scale}) translate(${panX}px, ${panY}px) rotate(${rotation}deg)`;
zoomedImg.style.cursor = (scale > 1) ? (isPanning ? 'grabbing' : 'grab') : '';
if(transition) {
fitBtn.classList.toggle('active', mode==="fit");
origBtn.classList.toggle('active',mode==="original");
fillBtn.classList.toggle('active',mode==="fill");
}
}
function zoomAt(x, y, scaleDelta) {
const rect = zoomedImg.getBoundingClientRect();
const imgCenterX = rect.left+rect.width/2;
const imgCenterY = rect.top + rect.height/2;
const offsetX = x - imgCenterX - panX;
const offsetY = y - imgCenterY - panY;
let newScale = Math.max(SCALE_MIN, Math.min(SCALE_MAX, scale + scaleDelta));
if(newScale===scale) return;
panX-=offsetX*(newScale/scale-1); panY-=offsetY*(newScale/scale-1);
scale = newScale;
setCustomMode();
updateImageScale(true);
}
function setCustomMode(){
mode = "custom";
fitBtn.classList.remove('active');
origBtn.classList.remove('active');
fillBtn.classList.remove('active');
}
function rotateCW(){
rotation=(rotation+90)%360;
if (mode==="fit") setFit(true);
else if(mode==="fill") setFill(true);
else if(mode==="original") setOriginal(true);
else updateImageScale();
setCustomMode();
}
rotateButton.addEventListener('click',function(e){e.stopPropagation();rotateCW();});
downloadButton.addEventListener('click',e=>e.stopPropagation());
closeButton.addEventListener("click", function(e){
e.stopPropagation();overlay.classList.remove("active");
document.body.style.overflow="";
closeAllModals();
hideCollapsedThumbsBtn();
});
overlay.addEventListener("click", function(e){
if(e.target!==overlay)return;
overlay.classList.remove("active");
document.body.style.overflow="";
closeAllModals();
hideCollapsedThumbsBtn();
});
leftArrow.addEventListener("click",function(e){
e.stopPropagation();
if(!zoomableImages.length)return;
currentIndex = (currentIndex===0)?zoomableImages.length-1:currentIndex-1;
showZoomedImage();
});
rightArrow.addEventListener("click",function(e){
e.stopPropagation();
if(!zoomableImages.length)return;
currentIndex = (currentIndex===zoomableImages.length-1)?0:currentIndex+1;
showZoomedImage();
});
zoomInButton.addEventListener("click",function(e){
e.stopPropagation();
scale = Math.min(SCALE_MAX,scale + SCALE_STEP); setCustomMode(); updateImageScale(true);
});
zoomOutButton.addEventListener("click",function(e){
e.stopPropagation();
scale= Math.max(SCALE_MIN, scale-SCALE_STEP); setCustomMode();
if(scale<=1)panX=0,panY=0;
updateImageScale(true);
});
fitBtn.addEventListener("click",function(e){e.stopPropagation();setFit(true);});
origBtn.addEventListener("click",function(e){e.stopPropagation();setOriginal(true);});
fillBtn.addEventListener("click",function(e){e.stopPropagation();setFill(true);});
zoomedImg.addEventListener("mousedown",function(e){
if(scale<=1)return;
isPanning = true;
startX = e.clientX; startY = e.clientY; startPanX = panX; startPanY = panY;
zoomedImg.style.cursor="grabbing";
e.preventDefault();
});
window.addEventListener("mousemove",function(e){
if(!isPanning)return;
panX = startPanX+(e.clientX-startX);
panY = startPanY+(e.clientY-startY);
updateImageScale(true);
});
window.addEventListener("mouseup",function(e){
isPanning=false;
zoomedImg.style.cursor=(scale>1)?"grab":"";
});
zoomedImg.addEventListener("mouseleave",function(e){
if(isPanning){ isPanning=false; zoomedImg.style.cursor=(scale>1)?"grab":""; }
});
zoomedImg.addEventListener("mouseenter",function(e){
zoomedImg.classList.add('zoomed-hover');
});
zoomedImg.addEventListener("mouseleave",function(){ zoomedImg.classList.remove('zoomed-hover'); });
zoomedImg.addEventListener("touchstart", function(e){
if(scale<=1)return;
isPanning = true;
startX = e.touches[0].clientX; startY = e.touches[0].clientY; startPanX = panX; startPanY = panY;
}, {passive:false});
window.addEventListener("touchmove", function(e){
if(!isPanning)return;
panX=startPanX+(e.touches[0].clientX-startX);
panY=startPanY+(e.touches[0].clientY-startY);
updateImageScale(true);e.preventDefault();
},{passive:false});
window.addEventListener("touchend",function(e){isPanning=false;});
overlay.addEventListener("wheel",function(e){
if(!overlay.classList.contains("active"))return;
let bar = document.elementFromPoint(e.clientX,e.clientY);
if(bar && (bar===thumbsBar || bar.closest('.image-zoom-thumbs-bar-outer'))) {
thumbsBar.scrollLeft += e.deltaY*1.8;
e.preventDefault(); e.stopPropagation();
return false;
}
if(e.ctrlKey)return;
const delta = e.deltaY<0?SCALE_STEP:-SCALE_STEP;
zoomAt(e.clientX, e.clientY, delta);
if(scale<=1){ panX=0; panY=0; scale=1; updateImageScale(true); }
e.preventDefault();
return false;
},{passive:false});
const keyAliases = {
"f":"fit", "o":"original", "z":"fill",
"r":"rotate", "d":"download", "c":"copy", "t":"toggleThumbs"
};
document.addEventListener("keydown", function(e){
if(!overlay.classList.contains("active")) return;
if(hotkeysModal){
if(e.key==="Escape") { closeHotkeysModal(); return; }
return;
}
const key = (e.key||"").toLowerCase();
const code = (e.code||"");
if(key==="arrowleft") leftArrow.click();
else if(key==="arrowright") rightArrow.click();
else if(key==="arrowup"){e.preventDefault();zoomInButton.click();}
else if(key==="arrowdown"){e.preventDefault();zoomOutButton.click();}
else if(key==="escape"){ overlay.classList.remove("active");document.body.style.overflow="";hideCollapsedThumbsBtn();}
else if(e.ctrlKey && (key==="+" || key==="=")){ zoomInButton.click(); }
else if(e.ctrlKey && (key==="‑"||key==="-")){ zoomOutButton.click(); }
else if(code==="NumpadAdd"){ zoomInButton.click(); }
else if(code==="NumpadSubtract"){ zoomOutButton.click();}
else if(key==="f"){ setFit(true); }
else if(key==="o"){ setOriginal(true); }
else if(key==="z"){ setFill(true); }
else if(key==="r") { rotateCW(); }
else if(key==="d"){downloadButton.click();}
else if(key==="c"){copyImageLink();}
else if(key==="t"){
if(thumbsCollapsed) setThumbsBarCollapsed(false,true);
else setThumbsBarCollapsed(true,true);
}
});
function copyImageLink() {
if(zoomedImg.src){
let t = document.createElement("input");
t.value = zoomedImg.src;
document.body.appendChild(t);
t.select();
try{document.execCommand('copy');}catch(e){}
t.remove();
try{
downloadButton.innerHTML+='<span style="font-size:11px;6px;color:#7f3;">✔</span>';
setTimeout(()=>{downloadButton.innerHTML =
`<svg style="width:23px;height:23px" viewBox="0 0 24 24"><path fill="white" d="M5,20H19A1,1 0 0,0 20,19V17H18V19H6V17H4V19A1,1 0 0,0 5,20M19,9H16V3H8V9H5L12,16L19,9Z" /></svg>`;
},800);
}catch(e){}
}
}
[zoomInButton,zoomOutButton,rotateButton].forEach(btn=>
btn.addEventListener('click',()=>setCustomMode())
);
downloadButton.tabIndex=0; closeButton.tabIndex=0;
fitBtn.tabIndex=0; origBtn.tabIndex=0; fillBtn.tabIndex=0;
zoomInButton.tabIndex=0; zoomOutButton.tabIndex=0; rotateButton.tabIndex=0; hotkeysBtn.tabIndex=0; collapseBtn.tabIndex=0;
setTimeout(function(){initImageZoom();},600);
const observer = new MutationObserver(function(mutations){
let shouldInit=false;
mutations.forEach(function(mutation){
if(mutation.addedNodes.length) {
mutation.addedNodes.forEach(node=>{
if(node.nodeType===1&&(node.tagName==='IMG'||node.querySelector('img'))) shouldInit=true;
});
}
});
if(shouldInit) initImageZoom();
});
observer.observe(contents,{childList:true,subtree:true});
setInterval(initImageZoom, 5000);
window.addEventListener('resize', centerCurrentThumb);
// Show the fixed button when manually entering the collapsed state!
const observerThumb = new MutationObserver(function(){
if(thumbsCollapsed&&!collapseBtnFixed)showCollapsedThumbsBtn();
});
observerThumb.observe(thumbsBarOuter, {attributes:true, attributeFilter: ['class']});
});
</script>