mediumZoom and Wordpress/Divi builder issue

mmattel commented 5 months ago

Bug description

Trying to make mediumZoom working in the Divi builder I stumble over one issue.

Working Example:

When running mz with Antora (a documentation framework), you add it via

...
var Mzm = (window.mzm = require('medium-zoom/dist/medium-zoom.min'))
Mzm('span.image img, div.imageblock img', { background: '#fff', margin: 10 })
...

Which results in a working zoomable image, example with the following code from the inspector:

<div class="imageblock">
  <div class="content">
  <img src="../_images/architecture/infinite_scale_data_platform.svg" alt="Infinite Scale Data Platform" width="500" class="medium-zoom-image">
  </div>
</div>

Failing Example with Divi:

Loading the library and initializing mediumZoom:

<script src="https://unpkg.com/medium-zoom@1.1.0/dist/medium-zoom.js">
</script>

<script>
jQuery(document).ready(function( $ ) {
    mediumZoom($('div.data-zoomable, img').toArray());
});
</script>

Note, using [data-zoomable] did not work...

Adding data-zoomable to the image CSS Class to make it zoomable.

This is the code from the inspector:

<div class="et_pb_module et_pb_image et_pb_image_0 data-zoomable">
  <span class="et_pb_image_wrap ">
    <img fetchpriority="high" decoding="async" width="740" height="900" 
     src="https://dev.innovation-und-beratung.com/storage/2020/04/innovation-ok-with-failing-procedure.png" 
     alt="innovation ok with failing procedure" title="Comfortable with failing procedures" 
     srcset="https://dev.innovation-und-beratung.com/storage/2020/04/innovation-ok-with-failing-procedure.png 
     740w, https://dev.innovation-und-beratung.com/storage/2020/04/innovation-ok-with-failing-procedure- 
     480x584.png 480w" sizes="(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 740px, 100vw" 
     class="wp-image-24617 medium-zoom-image">
  </span>
</div>

Now, the following happens:

The mouse changes to the + symbol when hovering. ✔️
When clicking on the image:
- medium-zoom-image--hidden is added to the class containing medium-zoom-image ✔️
- The clicked image disappears as per hidden ✔️
- But nothing else happens - there is no zoomed image shown 💥
Scrolling the screen makes the original image re-appear ✔️

I can provide you a temproary view access to my dev site if required.

Expected behavior

mediumZoom should show the zoomed image when using the Divi builder.

Environment

Browser: Opera, Firefox, Chrome, always latest
medium-zoom version: 1.1.0

francoischalifour commented 5 months ago

Could you reproduce in the sandbox by copying the Divi builder generated HTML?

It might be because of incorrect srcset, or attributes on the <img> that are copied to the zoomed image element and prevents it from rendering.

mmattel commented 5 months ago

@francoischalifour I have written a docs-only PR that fixes the issue. Would be happy if that finds its way into readme.md

francoischalifour / medium-zoom