laurenashpole/vue-inner-image-zoom

ZoomPreload

softy2k opened this issue · 1 comments

Hi.

I can't start with the default zoom image. I mean, I'd like the image to be zoomed in from the start.
I tried both versions (for Vue2 and for Vue3). I tested both Chrome and FireFox on Windows 10.
I use a .png image

My settings:

    <inner-image-zoom
      :src="image"
      :zoomSrc="image"
      :fullscreenOnMobile="true"
      :hideHint="true"
      moveType="drag"
      :zoomPreload="true"
    />

The zoomPreload option preloads the image to avoid delays but doesn't trigger a zoom. Since the positioning is dependent on user input, there isn't currently a way to start with a zoomed in image. The easiest way to fake it would probably be using zoomPreload together with a ref and simulating a click. Something like:

<inner-image-zoom
  ...
  :zoomPreload="true"
  ref="iiz"
/>

and:

mounted() {
  this.$refs.iiz.$el.click();
}

or, if you want a specific position:

mounted() {
  this.$refs.iiz.$el.dispatchEvent(new MouseEvent('click', {
    clientX: 400,
    clientY: 200
  }));
}

with your desired clientX and clientY coordinates.