medium-zoom pagination issues

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>

1 thought on “medium-zoom pagination issues”

  1. You will pretty much need to detach the event listeners here. Because it should be a lot of them added everytime due to the updated hook.

    A naive implementation would be to add mediumZoom on the mounted hook. And when you do have a new changePage event, to detach it from all the images, then to apply it to the new ones with the same mediumZoom call.

    Below is a way to see which event listeners (and probably how many) you have linked to a specific VueJS component. Select it in the Vue devtools and then, you will have access to the element’s properties via $vm0.

    enter image description here

    Reply

Leave a Comment