Zoom Image on Click in HUGO
Edit the extend_footer.html ,location shown above, and add the following snippet to the file. This will then zoom the image when clicked and set the background to a darker grey. {{- /* Footer custom content area start */ -}} {{- /* Insert any custom code web-analytics, resources, etc. here */ -}} <script src="https://cdnjs.cloudflare.com/ajax/libs/medium-zoom/1.0.6/medium-zoom.min.js" integrity="sha512-N9IJRoc3LaP3NDoiGkcPa4gG94kapGpaA5Zq9/Dr04uf5TbLFU5q0o8AbRhLKUUlp8QFS2u7S+Yti0U7QtuZvQ==" crossorigin="anonymous" referrerpolicy="no-referrer" ></script> <script> const images = Array.from(document.querySelectorAll(".post-content img")); images.forEach((img) => { mediumZoom(img, { margin: 0 /* The space outside the zoomed image */, scrollOffset: 40 /* The number of pixels to scroll to close the zoom */, container: null /* The viewport to render the zoom in */, template: null /* The template element to display on zoom */, /*background: "rgba(50, 50, 50, 1)",*/ }); }); </script> {{- /* Footer custom content area end */ -}}