Closed wadakatu closed 3 years ago
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!
I am trying to create photo website with vue.js and Laravel, and use luminous to magnify the photo when it is clicked. My photos are stored in AWS S3 bucket.
My vue.js structure is like below.
1.PhotoComponent.vue
2.PhotoListComponent.vue
There are three things that I have tried so far.
In this case, first picture works, but "
" opens as many as PhotoComponent.vue. For example, if I make a list of 9 pictures in PhotoListComponent and click the first photo, "" opens 9 times. However, other pictures won't work at all, but the new tab opens.In this case, a new tab opens whenever the photo is clicked, which means that luminous does not work.
For example...
In this case, the result is almost the same as pattern 1, but the first picture works perfectly as I expected. However, the other picutures won't open anything even a new tab.
Sorry for ranting. I am stuck with this problem for a week. I really need someone's help. Thank you for your cooperation.