Zoomed image appears behind the sidebar

[champagnealexandre]

Bug description

A clear and concise description of what the bug is.

Zoomed image appears behind any existing sidebar.

I’ve tried using margins, but then the image doesn’t scale correctly on mobile.

I’ve also tried using a container, but the zoomed image appears off-screen.

How to reproduce

A list of the steps to reproduce the bug.

Using the following code:

const images = Array.from(document.querySelectorAll("img"));
images.forEach(img => {
  mediumZoom(img, {
    margin: 0,
    scrollOffset: 40,
    background: "#fff"
  });
});

in a website that has a sidebar.

Expected behavior

A clear and concise description of what you expected to happen.

The image should appear in front of the sidebar.

Reproducible example

For example,

Environment

• Browser: safari 15.1
• medium-zoom version: 1.0.5

[francoischalifour]

This is likely because the sidebar z-index value is higher than the zoomed image's. We explain how to increase the z-index value in the documentation.

Closing for now, feel free to reopen.

[champagnealexandre]

@francoischalifour wonderful, working fine now!

Thank you!