How to use medium-zoom.js (lightbox) for CMS Blog posts

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:
image

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 :slight_smile:

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

5 Likes

Nice one! Thanks for sharing @Siton_Systems :webflow_heart:

1 Like

@Siton_Systems I have a question for you. How does medium-zoom.js work if the images are inside of a collection? Is it possible to add the zoom functionality to a collection of images?

I added .post-wrapper to the Collection Wrapper. I am also using owl.carousel.js - would that be the reason why medium-zoom.js is not working on mobile?

Thanks in advance for any advice…

Thanks so much for the tutorial!!

I have a question, I have my images in divs. It shows just a cropped part on some images. When I click/zoom, it just shows this cropped part. Is it possible that the click/zoom shows the original ratio as big as possible (vw/vh).? Like this: Monokai: a trip through Japan

https://klauss-slider-arrow-project.webflow.io/

https://preview.webflow.com/preview/klauss-slider-arrow-project?utm_medium=preview_link&utm_source=designer&utm_content=klauss-slider-arrow-project&preview=415a2ca41af807080e9d0fa4a7e3708f&mode=preview

Thanks so much Ezra! I was exactly looking for this solution and it solved my problem. Thanks!

1 Like