I am trying to create photo website with vue.js and Laravel, and use luminous to magni

Konnichiwa <a class="user-mention notranslate" data-hovercard-type="user" data-hoverca

is it possible to use luminous in vue.js? about luminous HOT 1 CLOSED

wadakatu commented on June 2, 2024

is it possible to use luminous in vue.js?

from luminous.

Comments (1)

frederickfogerty commented on June 2, 2024

Konnichiwa @wadakatu,

You should be able to make all of your solutions work.

For 1/ I think you need to be able to target only the image that exists within that component, so something like this could work:

<template>
  <div class="photo">
    <a class="luminous" :href="item.url">
      <img class="photo_image" :src="item.url" :alt="`photo taken by ~~`" />
    </a>
  </div>
</template>

<script>
import { Luminous } from "luminous-lightbox";
export default {
  name: "PhotoComponent.vue",
  props: {
    item: {
      // this item has photo info(like url)
      type: Object,
      required: true,
    },
  },
  methods: {
    luminous() {
      // only look for relevant elements *inside* this component. Should only match one element
      new Luminous(this.$el.querySelector(".luminous"));
    },
  },
  mounted() {
    this.luminous();
  },
};
</script>

For 2/ I think there might be an issue where the code isn't actually finding the image elements and thus is providing nothing to the LuminousGallery call. Maybe you could try debug that to find your issue.

I'm closing this for now, but I hope you find a solution to your issue!

from luminous.

Recommend Projects