Fs Lightbox

FS lightbox is easy to use, but powerful plugin for displaying various types of sources in beautiful overlying box with tons of features such as captions, thumbnails, zooming and more! For more details

Installing via npm
npm i fslightbox-vue
Example Code
<template>
    <b-row class="row row-cols-xl-3 row-cols-md-2 row-cols-1 g-3" v-else-if="isGallary">
        <b-col v-for="(data, index) in galleries" :key=index>
            <a href="javascript:void(0);" role="button" @click="togglerGallery(index + 1)">
                    #60;img :src="data" :alt="'profile-image' + index" class="img-fluid w-100" loading="lazy">
            </a>
        </b-col>
    </b-row>
    <FsLightbox :toggler="toggler" :sources="galleries" :slide="slide" />
</template>
Script
<script setup>
import FsLightbox from 'fslightbox-vue/v3'
import { ref } from 'vue';
const generateImgPath = (path) => {
    return window.origin + import.meta.env.BASE_URL + path;
}
const galleries = [
    generateImgPath('/assets/images/product/service-7.png'),
    generateImgPath('/assets/images/product/service-5.png'),
    generateImgPath('/assets/images/product/service-4.png'),
    generateImgPath('/assets/images/product/service-3.png'),
    generateImgPath('/assets/images/product/service-2.png'),
    generateImgPath('/assets/images/product/service-1.png'),
]
const toggler = ref(false)
let slide = 1
const togglerGallery = (index) => {
    slide = index
    toggler.value = !toggler.value
}
</script>
Header & Footer Style Next