search

francoischalifour / medium-zoom

🔎🖼 A JavaScript library for zooming images like Medium
https://medium-zoom.francoischalifour.com
MIT License
3.58k stars 161 forks source link

Conflict with Semantic UI #165

Closed daxpandhi closed 3 years ago

daxpandhi commented 3 years ago

When using medium-zoom with Semantic UI, the code works but images disappear when zooming.

This is because of a conflict with the z-index set by Semantic UI's "pusher" element for off-screen navigation which uses a Z-index value of 2. (https://semantic-ui.com/modules/sidebar.html#/usage)

I tried this fix:

.medium-zoom-overlay, .medium-zoom-image--opened {
    z-index: 999;
}

Might it be worth adding to the injected css in the script itself, perhaps?

francoischalifour commented 3 years ago

The default z-index value is quite low to not be too intrusive. Since that's something that each person can update easily to their own website's needs, we won't increase it for now.

Edit: actually we don't even specify a z-index value.

daxpandhi commented 3 years ago

Makes sense. But since this is by design, yet affecting an entire framework and not just a custom site, and was difficult to figure out, perhaps it might be worth mentioning in the documentation somewhere and the specific classes that may need a higher z-index. I only found it after a fair bit of trial and error. On the surface, it just makes it look like the script is broken.

francoischalifour commented 3 years ago

That's fair, thanks! Addressed in #167.