Uncoupled general images CSS from image-focus

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);
 }
 

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("<div id='image-focus-overlay'>" + 
 	`<div class='help-overlay'>
@@ -603,10 +600,3 @@ function focusImageSpecifiedByURL() {
 		});
 	}
 }
-
-/******************/
-/* INITIALIZATION */
-/******************/
-
-imageFocusSetup();
-focusImageSpecifiedByURL();

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();
 });