CMS

Zoom sur une image dans un rich text

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

Etape 1 - Ajouter le script sur la page ou le 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 - Ajouter les attributes correspondants

Tuto, template & scripts

<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 - Ajuster le code pour votre besoin

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

Progressez sur Webflow

Oops! Une erreur s'est produite lors de la soumission du formulaire.