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("