Lightbox.vue

<template>
    <v-dialog v-model="dialog">
        <template v-slot:activator="{ on, attrs }">
            <v-img
                v-on="on"
                v-bind="attrs"
                :src="`https://picsum.photos/500/300?image=${n * 5 + 10}`"
                :lazy-src="`https://picsum.photos/10/6?image=${n * 5 + 10}`"
                aspect-ratio="1"
                class="grey lighten-2"
                style="cursor: pointer;"
            ></v-img>
        </template>
        <v-container class="pa-0">
            <v-row no-gutters justify="center" class="fill-height">
                <v-col lg="10" md="12" offset-lg="0" class="fill-height text-right">
                    <v-img class="rounded-sm rounded-tr-0"
                           style="position: relative; right: 0;"
                           :src="`https://picsum.photos/id/${n * 5 + 10}/1280/720/`"
                           :lazy-src="`https://picsum.photos/id/${n * 5 + 10}/80/45?blur`" :height="height" :width="width"
                           contain></v-img>
                </v-col>
                <v-col lg="2" md="4" align-self="top" @click="dialog = false">
                    <v-sheet class="rounded-tr-lg text-left" elevation="3">
                        <v-container class="ml-2">
                            <v-row no-gutters>
                                <v-col lg="12">
                                    <p class="mb-2">
                                        <v-icon>mdi-camera</v-icon>
                                        {{ metadata.cameraName }}
                                    </p>
                                </v-col>
                                <v-col lg="12">
                                    <p class="mb-2">
                                        <v-icon>mdi-camera-iris</v-icon>
                                        {{ metadata.focalLength }}.0mm f/{{ metadata.aperture }}
                                    </p>
                                </v-col>
                                <v-col lg="12">
                                    <p class="mb-2">
                                        <v-icon>mdi-camera-timer</v-icon>
                                        {{ shutterSpeed }}
                                    </p>
                                </v-col>
                            </v-row>
                        </v-container>
                    </v-sheet>
                    <v-btn style="color: white;" large class="rounded-l-0 rounded-tr-0" elevation="3" block color="green">
                        ORDER
                        <v-icon right dark>mdi-cart-plus</v-icon>
                    </v-btn>
                </v-col>
            </v-row>
        </v-container>
    </v-dialog>
</template>

<script>
export default {
    name: "Lightbox",
    props: {
        'n': Number
    },
    data: () => ({
        'dialog': false,
        'thumbnailURL': '',
        'width': 1280,
        'height': 720,
        'metadata': {
            'shutterSpeed': {
                'numerator': 1,
                'denominator': 400
            },
            'focalLength': 40,
            'aperture': 2.8,
            'iso': 800,
            'cameraName': 'Nikon D500'
        }
    }),
    methods: {
        closeLightbox() {
            if (this.$data.dialog)
                this.$data.dialog = false;
        },
        include() {
            return [document.querySelector('.included')]
        },
    },
    computed: {
        shutterSpeed() {
            if (this.$data.metadata.shutterSpeed.denominator === 1) {
                return `${this.$data.metadata.shutterSpeed.totalTime}s`;
            }
            return `${this.$data.metadata.shutterSpeed.numerator}/${this.$data.metadata.shutterSpeed.denominator}s`
        }
    }
}
</script>

<style lang="scss">
.v-dialog {
    margin: 0;
    padding-left: 24px;
    padding-right: 24px;
    box-shadow: none !important;
}
</style>