Image appears outside zoom container

[selfagency]

Bug description

.medium-zoom-overlay is being added at the same moment as .medium-zoom-image, and therefore the image is being placed outside of the container.

How to reproduce

A list of the steps to reproduce the bug.

1. Run mediumZoom(document.querySelectorAll('.user-photo'))
2. Click on the image
3. See error

Expected behavior

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

The image should be placed within the overlay div.

Reproducible example

Live example

Environment

• Browser: Chromium Mac and Safari iOS
• medium-zoom version: 1.0.4

[francoischalifour]

The zoom container could be misconfigured here. Do you have a code snippet (HTML + JavaScript) of the issue?

[selfagency]

I'm using it within a Vue component. My best guess is there's some kind of race condition because of the way Vue dynamically adds elements. But then again, I have it set to wait a full second until after page loads to select the elements.

import mediumZoom from 'medium-zoom'

const utils = Vue => {
  Vue.prototype.$utils = {
    zoom: mediumZoom
  }
}

export default utils

<template>
  <section v-if="user && Object.values(user).length" id="meta">
    [...]
      <div v-if="hasPhoto(user)" class="third">
        <div v-if="lookup && lookup.details && lookup.details.photos.length">
          <img class="user-photo" :src="lookup.details.photos[0].value" :alt="lookup.fullName" />
        </div>
        <div v-if="user.photo && user.photo.startsWith('ht')">
          <img class="user-photo" :src="user.photo" :alt="user.name" />
        </div>
        <div v-if="user.photoAlt && user.photoAlt.startsWith('ht') && user.photoAlt !== user.photo">
          <img class="user-photo" :src="user.photoAlt" :alt="user.name" />
        </div>
      </div>
    [...]
  </section>
</template>

<script>
export default {
  [...]
  mounted() {
    this.$nextTick(() => {
      setTimeout(() => {
        this.$utils.zoom(document.querySelectorAll('.user-photo'))
      }, 1000)
    })
  }
  [...]
}
</script>

<style lang="stylus" scoped>
.user-photo
  width 100%
</style>

[francoischalifour]

I realize now that what you call "container" is the overlay HTML element. This element is expected to not contain the image, since it's used to add a background to highlight the zoomed image. You can see that on the official demo. This is therefore the expected behavior.

Is there an issue with this behavior on your website?

[francoischalifour]

Closing for inactivity.