Recently, I integrated a reusable component called "LightBox" into my website, which displays images in higher resolution. The LightBox functionality is linked to each element having a thumbnail. However, I encountered an issue. There are multiple elements where I need to modify the properties of the class "thumbnail", but I am unsure how to achieve this. I attempted using v-bind, but unfortunately, it didn't yield the desired outcome.
Below is a snippet of my code:
<template>
<div>
<a href="" @click.prevent="show">
<img class="thumbnail" :src="images[thumbnailIndex]" loading="lazy">
</a>
<div class="lightbox" v-if="visible" @click="hide">
<div class="flex">
<div class="cursor left" @click.stop="prev" :class="{ 'invisible': !hasPrev() }">
<svg fill="#ffff" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="100px" height="100px"
viewBox="0 0 537.66 537.66" xml:space="preserve" stroke="#ffff">
[...] (SVG path continuation)
</svg>
</div>
<div class="lightbox-image" @click.stop="">
<img :src="images[index]" loading="lazy">
</div>
<div class="cursor right" @click.stop="next" :class="{ 'invisible': !hasNext() }">
<svg class="size" fill="#ffff" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="100px" height="100px"
viewBox="0 0 537.66 537.66" xml:space="preserve" transform="rotate(180)" stroke="#ffff">
[...] (SVG path continuation)
</svg>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
thumbnailIndex: {
type: Array,
required: true,
},
images: {
type: Array,
default: () => [],
},
},
data() {
return {
visible: false,
index: 1,
};
},
methods: {
Index(){
let thumbnailIndex = images.findIndex(element => element === thumbnail);
},
show() {
this.visible = true;
this.index=this.thumbnailIndex
},
hide() {
this.visible = false;
this.index = 0;
},
hasNext() {
return this.index + 1 < this.images.length;
},
hasPrev() {
return this.index - 1 >= 0
},
prev() {
if (this.hasPrev()) {
this.index -= 1;
}
},
next() {
if (this.hasNext()) {
this.index += 1
}
}
}
}
</script>
<style>
.thumbnail {
width: 29vh;
}
.lightbox {
position: fixed;
z-index: 500;
display: flex;
justify-content: center;
align-content: center;
background: rgba(0, 0, 0, 0.8);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
}
.lightbox-image img {
width: auto;
height: auto;
max-width:50%;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.cursor {
cursor: pointer;
display: block;
position: absolute;
z-index: 1000;
top: 50%;
visibility: visible;
}
.cursor.right {
right: 10%;
}
.cursor.left {
left: 10%;
}
.invisible {
visibility: hidden;
}
@media screen and (max-width: 1024px) {
.thumbnail{
width: 100%;
}
.lightbox-image img{
max-width: 80%;
max-height: 80%;;
}
.cursor{
top: 70%;
}
}
</style>
This is an example of how I attempted to modify classes for individual thumbnails:
<LightBox :thumbnail-index="0" :images="images" :style="{width: "25vh"}"></LightBox>
<LightBox :thumbnail-index="1" :images="images" :style="{width: "25vh"}"></LightBox>
<LightBox :thumbnail-index="2" :images="images" :style="{width: "25vh"}"></LightBox>
<LightBox :thumbnail-index="3" :images="images" :style="{width: "25vh"}"></LightBox>