Support Apple Magic Trackpad and Magic Mouse

[UIX-Design]

Hi, thank you very much for this component.

I am using the Apple Magic Trackpad or Magic Mouse. It would be very nice, when i could use the swipe-gesture on my trackpad to switch between the images.

Is it possible to implement that? If that's too elaborate ... Would it otherwise be possible to display arrows for the gallery navigation on desktop devices?

Another question, it is possible to add properties for image description? I would like to add description above each image, e.g. in the Gallery.

And it is possible to show all images in the gallery as previewImage like that?

[jarvisniu]

I have added the swipe gesture on trackpad (updated to v0.3.1). But it has a small limit that you can't swipe too frequently because of the momentum of trackpad.

The other 3 questions (navigation arrows, image description, thumbnail list) will not included in the component. Because almost eveyone's desirable ui style is different and they are very easy to implement by themeselves outside the component.

If you have trouble doing it yourself, I can give you some demo code.

[UIX-Design]

@jarvisniu thank you very much for that

Thank You, but I was able to implement the functions myself 😉

When i install the version v0.3.1 via npm i get a warning, after installation: Critical dependency: the request of a dependency is an expression Is that normal?

When i set ssr: true so i don't get the red error, but the other warning is still exists (i am using nuxt js)

Image Display Bug

And another bug i found. When i open the v-zoom-gallery it looks like this:

After i resizing my screen a little bit, it looks good:

Why does this bug occur? Is it a CSS error?

[jarvisniu]

You can ignore the warning the request of a dependency is an expression. There is no influence actually. This is caused by the UMD module format.

But when you use bundlers (like nuxt), you can fix the warning by replacing:

import VueZoomer from 'vue-zoomer'
import 'vue-zoomer/dist/vue-zoomer.css'

with:

import VueZoomer from 'vue-zoomer/src/index.js'

[jarvisniu]

I have never met the display bug before. If you can find the operation steps to 100% reoccuring. It will be easier to find the bug and fix it.

[UIX-Design]

@jarvisniu I honestly have difficulty finding and fixing the display error. I created a demo project on codesandbox.io. Could you please take a look at the code? You may be able to find the bug right away. On first loading, i could see the display bug. But then no more. But maybe you can reconstruct the bug after all.

I would really be very happy about your support. Thank you very much

https://codesandbox.io/embed/codesandbox-nuxt-3fgie?fontsize=14

I think the problem is because of the slider divs. As you can see on the screen below, the div doesn't go over the full width of the screen. It looks different on your demo page. The slider divs go over the entire screen width

After i resizing my screen a little bit, it looks like this:

The left property on the div is now right

[jarvisniu]

You can try the following four methods one by one. If one of these works, I can wrap it into the component.

  <v-zoomer-gallery
+   ref="zoomer"
    style="width: 100%; height: 100%; background-color: none"
    :list="imageSources"
    v-model="selIndex"
  ></v-zoomer-gallery>

  mounted () {
+   this.$refs.zoomer.onWindowResize() // 1. directly call
+   this.$nextTick(this.$refs.zoomer.onWindowResize) // 2. nextTick
+   setTimeout(this.$refs.zoomer.onWindowResize, 0) // 3. setTimeout-0
+   setTimeout(this.$refs.zoomer.onWindowResize, 100) // 4. setTimeout-100
  },

[UIX-Design]

@jarvisniu Unfortunately, no method works. The error still exists. What I noticed: When the gallery is opened for the first time, the left property is set to 100px or -100px. Only after I have enlarged or shrunk my window do the left properties change to the right values, as you can see on the upper screenshots. Then when I close the gallery and open everything looks great.

So as it seems it can't access the screen width on first opening or reloading the page, unless I change the width of Chrome

How can we fix this bug? I really want to use your Component

[jarvisniu]

Oh, sorry. For your situation, you should add it here:

openFullscreen() {
  this.fullscreen = true;
+ // this.$nextTick(this.$refs.zoomer.onWindowResize) // 1. nextTick
+ // setTimeout(this.$refs.zoomer.onWindowResize, 0) // 2. setTimeout-0
+ // setTimeout(this.$refs.zoomer.onWindowResize, 100) // 3. setTimeout-100
},

Have another try please.

[UIX-Design]

@jarvisniu thank you very much, it works now 🎉👍