Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

mediumZoom and Wordpress/Divi builder issue #211

Open
mmattel opened this issue Jan 24, 2024 · 2 comments · May be fixed by #212
Open

mediumZoom and Wordpress/Divi builder issue #211

mmattel opened this issue Jan 24, 2024 · 2 comments · May be fixed by #212

Comments

@mmattel
Copy link

mmattel commented Jan 24, 2024

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/[email protected]/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
Copy link
Owner

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 mmattel linked a pull request Jan 30, 2024 that will close this issue
Open
@mmattel
Copy link
Author

mmattel commented Feb 2, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[docs-only] Add Divi as framework example mmattel/medium-zoom
2 participants
@mmattel @francoischalifour