CMS

Autre

Zoom sur une image dans un rich text

Zoomer sur une image dabs un rich text pour l'ouvrir comme une modale

Copier ce script

Etape 1

Copier le script et le coller sur votre page ou projet Webflow

<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 */
    });
  });
}
</script>
Copier

Etape 2

Intégrer sur Webflow en adaptant à votre projet et votre configuration

  • Changer la class du parent contenant le rich text (ici post-wrapper)
  • Adapter le style (couleur du fond, l'opacité etc..)