vuetify enlarge image on click - css

Question

i have a image gallery on vuetify and trying to enlarge the image using the fullscreen function.
<template>
<v-container class="mt-12">
<v-row justify="center" v-if="!$fetchState.pending">
<v-col
cols="4"
v-for="image in service.data.attributes.gallery.data"
:key="image.id"
>
<v-img
class="d-flex child-flex"
:src="`${image.attributes.formats.large.url}`"
:lazy-src="`${image.attributes.formats.thumbnail.url}`"
contain
#click="toggleFullscreen(image.attributes.url)"
>
</v-img>
</v-col>
</v-row>
<v-row v-else>
<LoadSpinner />
</v-row>
and my toogle method
methods: {
toggleFullscreen(elem) {
console.log(elem);
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
} else {
alert(
"Sorry, your browser is too old and doesn't support fullscreen :-("
);
}
},
},
i have and array coming from a strapi api, the idea is show in the gallery a low res image and when cliking fullscreen the high res version.
problem everytime i click it triggers the alert, so the method is not getting the correct info to work, could be v-img creates a div and uses de image as background?
thanks
pd tried already dialog and overlay but can't figure out how to "attack" individual elements

Answer 1

After trying various libraries and what had to offer vuetify i did a workaround with vanilla css.
I created a variable, when you click on a image passes the url of the image, the template loads a div when this variable is not null with and overlay class to cover the screen.
in my template
<v-img
v-for="image in service.data.attributes.gallery.data"
:key="image.id"
:src="`${image.attributes.formats.large.url}`"
#click="toggleFullscreen(image.attributes.url)"
/>
<div v-if="selectedImage" class="overlay">
<v-img
class="mt-12"
:src="selectedImage"
alt=""
height="95vh"
contain
dark
#click.stop="selectedImage = null"
>
</v-img>
</div>
script part
<script>
...
export default {
data() {
return {
...
selectedImage: null,
};
},
...
methods: {
toggleFullscreen(elem) {
this.selectedImage = elem;
},
},
};
</script>
css
.overlay {
position: fixed; /* Sit on top of the page content */
width: 100%; /* Full width (cover the whole page) */
height: 100%; /* Full height (cover the whole page) */
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
cursor: pointer; /* Add a pointer on hover */
}