A JavaScript library for zooming images like Medium
How to
Less than 1 min
CDN before body
Copy => Paste before body
<script src="https://cdn.jsdelivr.net/npm/medium-zoom@1.0.3/dist/medium-zoom.min.js"></script>
https://www.jsdelivr.com/package/npm/medium-zoom
Page setting:
Go to collection page:
Add wrapper for the article
- with class .post-wrapper
in this example:
Installation
The selector
allows attaching images to the zoom.
Use the Descendant selector .post-wrapper img
(Read about Descendant CSS elector). Like saying "select all images inside “post-wrapper”. We put all of these nodes
inside an array.
const images = Array.from(document.querySelectorAll('.post-wrapper img'))
Then we add medium-zoom by a forEach loop (Change the deafult options if you want)
images.forEach(img => {
mediumZoom(img, {
margin: 0, /* The space outside the zoomed image */
background: "#fff", /* The background of the overlay */
scrollOffset: 40, /* The number of pixels to scroll to close the zoom */
container: null, /* Advanced - The viewport to render the zoom in */
template: null /* Advanced - The template element to display on zoom */
});
});
Full copy-paste
code
<!-- medium-zoom.js -->
<script src="https://cdn.jsdelivr.net/npm/medium-zoom@1.0.3/dist/medium-zoom.min.js"></script>
<script>
const images = Array.from(document.querySelectorAll(".post-wrapper img"));
images.forEach(img => {
mediumZoom(img, {
margin: 0, /* The space outside the zoomed image */
background: "#fff", /* The background of the overlay */
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>
Push to live and test the live URL
Initialize only on desktop
On mobile most of the times by default the image is 100% width - so if you want to use the zoom only
on big screens use this code:
if ($(window).width() >= 991) {
(related)
Full copy-paste code
<!-- medium-zoom.js -->
<script src="https://cdn.jsdelivr.net/npm/medium-zoom@1.0.3/dist/medium-zoom.min.js"></script>
<script>
const images = Array.from(document.querySelectorAll(".post-wrapper img"));
if ($(window).width() >= 991) {
images.forEach(img => {
mediumZoom(img, {
margin: 0, /* The space outside the zoomed image */
background: "#fff", /* The background of the overlay */
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>
Docs:
#webflow posts #webflow CMS #webflow blog posts lightbox