Streaming live at 10am (PST)

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

#1

A JavaScript library for zooming images like Medium

https://medium-zoom.francoischalifour.com/

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 Live demo:
http://new-landing-page-94e5db.webflow.io/post/3

#webflow posts #webflow CMS #webflow blog posts lightbox

1 Like
#2

Nice one! Thanks for sharing @Siton_Systems :webflow_heart:

1 Like