How do I open a fancybox instance after my component mounts in Vue 3 ?

[stanley6631]

I have a fancybox integration with my vue 3 app, I need to send users a link to specific photos in gallery. There is obviously a fragment to every item, but it doesnt open since the component is not mounted on page load and needs to wait for the API response. Whats the best way to open a specific gallery item after the component mounts ?

This is my fancybox component:

<template>
  <div ref="container">
    <slot></slot>
  </div>
</template>

<script>
import { Fancybox } from '@fancyapps/ui'
import '@fancyapps/ui/dist/fancybox/fancybox.css'

export default {
  props: {
    options: Object
  },
  mounted() {
    Fancybox.bind(this.$refs.container, '[data-fancybox]', {
      ...(this.options || {})
    })
  },
  updated() {
    Fancybox.unbind(this.$refs.container)
    Fancybox.close()

    Fancybox.bind(this.$refs.container, '[data-fancybox]', {
      ...(this.options || {})
    })
  },
  unmounted() {
    Fancybox.destroy()
  }
}
</script>

This is how I use it in my view to create gallery:

<Fancybox
        :options="{
          Toolbar: {
            display: {
              left: ['infobar'],
              middle: [],
              right: ['close']
            }
          }
        }"
      >
        <div class="row g-3 g-xl-5">
          <div v-for="(object, index) in photoUrlsSmall" class="col-md-6 col-lg-4">
            <div class="album-detail-card">
              <div class="album-detail-image">
                <a
                  :href="
                    photoUrlsMedium.find((element) => element.albumPhotoId === object.albumPhotoId)
                      .url
                  "
                  data-fancybox="detail-gallery"
                >
                  <img :src="object.url" :alt="album.albumName" class="img h-100" />
                </a>
                <div
                  class="album-detail-image-overlay d-flex align-items-center justify-content-center"
                >
                  <div class="d-flex flex-column align-items-center justify-content-center w-100">
                    <IconSearch class="icon-detail" />
                  </div>
                </div>
              </div>
              <div class="d-flex align-items-center justify-content-between p-2">
                <IconShare class="icon-share" @click="copyPhotoLink(index + 1)" />
                <span class="btn btn-small btn-primary ms-auto"
                  ><IconCart />
                  <span class="button-text">{{ $t('add_to_cart') }}</span>
                </span>
              </div>
            </div>
          </div>
        </div>
      </Fancybox>

[fancyapps]

Hi,

You could add additional check in your Fancybox component and start Fancybox using

Fancybox.fromSelector('[data-fancybox]');

or

Fancybox.fromNodes(
  Array.from(document.querySelectorAll('[data-fancybox="gallery"]')),
  {
    // Your custom options
  }
);

See https://fancyapps.com/fancybox/getting-started/#additional-uses

Basically, there is no "right method", just check out API and use your imagination.