Docsy - Click Image and Zoom-in
I use Medium Zoom in my Docsy website to make images clickable and zoomable.
Simply add the following code in /layouts/partials/hooks/body-end.html
:
<script src="https://cdnjs.cloudflare.com/ajax/libs/medium-zoom/1.0.7/medium-zoom.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
const images = Array.from(document.querySelectorAll("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 */
});
});
</script>
<script >
/* */
(function() {
var a = document.querySelector("#td-section-nav");
addEventListener("beforeunload", function(b) {
localStorage.setItem("menu.scrollTop", a.scrollTop)
}), a.scrollTop = localStorage.getItem("menu.scrollTop")
})()
</script>
That's it. Now the images are automatically clickable and zoomable.
Here is another example used in a Hugo website that does not use the Docsy theme.
<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 */
});
});
</script>
<!-- https://ionic.io/ionicons -->
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
Other Choices
Last modified: October 15, 2023