diff --git a/assets/css/image-focus.css b/assets/css/image-focus.css index 4ff7904..762cdda 100644 --- a/assets/css/image-focus.css +++ b/assets/css/image-focus.css @@ -6,11 +6,11 @@ /*= Hover styles =*/ /*=--------------=*/ -.img img:hover { +.image-wrapper img:hover { filter: drop-shadow(0 0 3px #777); cursor: zoom-in; } -.img img:active { +.image-wrapper img:active { transform: scale(0.975); } diff --git a/assets/js/image-focus.js b/assets/js/image-focus.js index 6054d24..f8ecb75 100644 --- a/assets/js/image-focus.js +++ b/assets/js/image-focus.js @@ -84,8 +84,8 @@ String.prototype.hasPrefix = function (prefix) { function imageFocusSetup() { if (typeof GW.imageFocus == "undefined") GW.imageFocus = { - contentImagesSelector: "article img, .gallery img", - focusedImageSelector: "article img.focused, .gallery img.focused", + contentImagesSelector: ".gallery img", + focusedImageSelector: ".gallery img.focused", shrinkRatio: 0.975, hideUITimerDuration: 1500, hideUITimerExpired: () => { @@ -118,16 +118,13 @@ function imageFocusSetup() { image.addEventListener("click", GW.imageClickedToFocus); }); - // Wrap all images in a span. + // Add image wrapper class. document.querySelectorAll(GW.imageFocus.contentImagesSelector).forEach(image => { - let wrapper = document.createElement("span"); - wrapper.classList.add("image-wrapper", "img"); - image.parentElement.insertBefore(wrapper, image); - wrapper.appendChild(image); - wrapper.classList.add(...image.classList); - image.classList.remove(...image.classList); - }); - + let wrapper = image.closest(".img"); + if (wrapper) + wrapper.classList.add("image-wrapper"); + }); + // Create the image focus overlay. let imageFocusOverlay = addUIElement("
" + `
@@ -603,10 +600,3 @@ function focusImageSpecifiedByURL() { }); } } - -/******************/ -/* INITIALIZATION */ -/******************/ - -imageFocusSetup(); -focusImageSpecifiedByURL(); diff --git a/assets/js/script.js b/assets/js/script.js index e611719..791baae 100644 --- a/assets/js/script.js +++ b/assets/js/script.js @@ -456,10 +456,10 @@ registerInitializer('earlyInitialize', true, () => (query("#content") != null), /*************************/ registerInitializer('pageLayoutFinished', false, () => (document.readyState == "complete"), () => { - GWLog("INITIALIZER pageLayoutFinished"); - forceInitializer('earlyInitialize'); + GWLog("INITIALIZER pageLayoutFinished"); + // We pre-query the relevant elements, so we don’t have to run queryAll on // every firing of the scroll listener. GW.scrollState = { @@ -472,5 +472,18 @@ registerInitializer('pageLayoutFinished', false, () => (document.readyState == " GW.scrollState.siteNavUI.forEach(element => { element.addEventListener("mouseover", () => { showSiteNavUI(); }); }); + + // Wrap all images in a span. + document.querySelectorAll("main > nav ~ * img").forEach(image => { + let wrapper = document.createElement("span"); + wrapper.classList.add("img"); + image.parentElement.insertBefore(wrapper, image); + wrapper.appendChild(image); + wrapper.classList.add(...image.classList); + image.classList.remove(...image.classList); + }); + + imageFocusSetup(); + focusImageSpecifiedByURL(); });