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 */ -}}