medium-zoom pagination issues

by

In my project I use medium-zoom with pagination. On first page it works well but on second, third, fourth… i have to click several times for close image…on second page…two times, on third 3 times…
it seems to be a problem with maybe any index number?

here is my code:

    <div v-if="loading" class="text-center">
          <i class="fas fa-spinner fa-pulse fa-5x"></i>
        </div>
        <div v-else>
        <div class="m-3" v-for="(item, imageIndex) in pageOfItems" :key="item.id">
            <div class="row mt-3">
              <div class="col-lg-9 my-auto" v-html="item.mytext">
              </div>
              <div class="col-lg-3 my-auto text-center">
                <article class="container">
                <img class="img-thumbnail" :src= "'http://localhost:4000/api/galeria/' + item.galeriaId + '_f.jpg'">
              </article>
            </div>
          </div>
          <hr class="hr1">
        </div>
        </div>
<div class="pb-0 pt-3 text-center">
  <jw-pagination :items="info" :pageSize="10" @changePage="onChangePage"></jw-pagination>
</div>


<script>
import mediumZoom from 'medium-zoom'
import axios from 'axios'
export default {
  data () {
    return {
      info: [],
      customLabels,
      pageOfItems: [],
      loading: true
    }
  },
  mounted () {
    axios
      .get('http://localhost:4000/api/fetch_galeria.php/')
      .then(response => (this.info = response.data))
      .finally(() => (this.loading = false))
  },
  updated () {
    mediumZoom(('article img'), {
      background: 'transparent'
    })
  },
  methods: {
    onChangePage (pageOfItems) {
      // update page of items
      this.pageOfItems = pageOfItems
    }
  }
}
</script>

106 thoughts on “medium-zoom pagination issues”