fancyboxgalleryvuejs3lightbox

Popup gallery plugin with video support for Vue 3?

I've done some serious internet searching to find a popup gallery plugin for Vue 3 which supports both images and video files. Most of the plugins are written for Vue 2.

Anybody can recommend a good plugin? (something like fancybox/lightbox)

Solution

  • I've managed to solve this with fancyapps. Since it is written in vanilla JS, I could include it in my Vue file easily. The only difference is you don't need to register it as a component. P.S. In order to use fancyapps on page load, you will need to add the code for initialization in the activated() lifecycle hook.

    FancyboxItem.vue

    First import the fancybox:

    import {Fancybox} from "/@fancyapps/ui/src/Fancybox/Fancybox";

    Also, css is required:

    <style lang="scss" scoped>
  @import "@fancyapps/ui/dist/fancybox.css";
</style>

    Then in my template I've added a button with a click event.

    <template>
   <button id="play-button" @click="startFancy()"></button>
</template>

    And in the methods, I've created a function that starts the fancybox:

    methods: {
  startFancy: {
   var gallery = this.imgs; //your object with images
   Fancybox.show(gallery, {}); //starts fancybox with the gallery object
  }
}