mahee-auffret/components/Projects.vue

<template>
    <main>
        <article v-for="content in contents" :key="content.id">
            <div>
                <NuxtImg 
                    :src="img((content.image ? content.image : content.shop_image))"
                    :alt="content.titre"
                    format="webp"
                    placeholder
                    lazy
                    sizes="sm:40vw lg:30vw"
                    @click="displaySlider(content.id)" />
            </div>
            <div>
                <p v-if="content.titre">{{ content.titre }}</p>
                <p v-if="content.medium">{{ content.medium }}</p>
                <p v-if="content.description">{{ content.description }}</p>
                <p v-if="content.format">{{ content.format }}</p>
                <p v-if="content.annee">{{ content.annee }}</p>
                <p v-if="content.prix">{{ content.prix }}</p>
            </div>
        </article>
        <swiper 
            :zoom="true"
            :loop="true"
            :modules="modules"
            :navigation="true"
            @slideChange="onSlideChange"
            @swiper="onSwiper"
        >
            <swiper-slide v-for="content in contents" :key="content.id">
                <div class="swiper-zoom-container">
                    <NuxtImg 
                        :src="img((content.image ? content.image : content.shop_image))"
                        :alt="content.titre"
                        format="webp"
                        placeholder
                        lazy />
                </div>
            </swiper-slide>
            <div class="swiper-button-close" @click="closeSlider()"></div>
        </swiper>
    </main>
</template>

<script>
import { A11y, Navigation, Zoom } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/css";
import 'swiper/css/zoom';

export default {
    setup() {
        const { getThumbnail : img } = useDirectusFiles();

        const swiperInstance = ref(null);
        const onSwiper = (swiper) => {
            swiperInstance.value = swiper;
        };
        const onSlideChange = () => {};

        const displaySlider = (index) => {
            const body = document.querySelector('body');
            body.style.overflowY = 'hidden';
            const swiper = swiperInstance.value;
            swiper.slideToLoop(index - 1);
            const swiperEl = swiper.el;
            swiperEl.style.display = "block";
            setTimeout(() => {
                swiperEl.style.opacity = 1;
            }, 10);
        }

        const closeSlider = () => {
            const body = document.querySelector('body');
            body.style.overflowY = 'auto';
            const swiperEl = document.querySelector('.swiper');
            swiperEl.style.opacity = 0;
            setTimeout(() => {
                swiperEl.style.display = "none";
            }, 300);
        }

        return {
            onSwiper,
            onSlideChange,
            modules: [Navigation, A11y, Zoom],
            displaySlider,
            closeSlider,
            img
        };
    },
    components: {
        Swiper,
        SwiperSlide,
    },
    props: {
        contents: Object
    }
}
</script>

<style lang="scss">
    main {
        margin-top: 5vh;
        article {
            display: flex;
            margin-bottom: 3vh;
            > div:first-of-type {
                width: 40vw;
                img {
                    width: 100%;
                    cursor: pointer;
                }
            }
            > div:last-of-type {
                padding-left: 5vw;
                width: 50vw;
                p {
                    line-height: 1.2;
                    margin-bottom: 0.5vh;
                }
            }
        }
        .swiper {
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            backdrop-filter: blur(5px);
            background-color: rgba(255, 255, 255, 0.5);
            position: fixed;
            display: none;
            opacity: 0;
            transition: opacity 0.3s ease-out;
            .swiper-wrapper {
                .swiper-slide {
                    width: 100%;
                    height: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    img{
                        width: 60%;
                    }
                }
            } 
            .swiper-button-prev,
            .swiper-button-next,
            .swiper-button-close {
                z-index: 1;
                position: absolute;
                width: 2rem;
                height: 2rem;
                background-position: center;
                background-size: cover;
                background-repeat: no-repeat;
                cursor: pointer;
            }
            .swiper-button-prev {
                left: 5vw;
                bottom: calc(50vh - 1rem);
                background-image: url(/assets/images/before.png);
            }
            .swiper-button-next {
                right: 5vw;
                bottom: calc(50vh - 1rem);
                background-image: url(/assets/images/after.png);
            }
            .swiper-button-close {
                right: 5vw;
                top: 5vh;
                background-image: url(/assets/images/close.png);
            }
        }
    }

    @media screen and (min-width: 800px) {
        main {
            article {
                > div:first-of-type {
                    width: 25vw;
                }
                > div:last-of-type {
                    padding-left: 2vw;
                }
            }
            .swiper .swiper-wrapper .swiper-slide img {
                width: 40%;
            }
        }
    }

    @media screen and (min-width: 1200px) {
        main {
            article > div:first-of-type {
                width: 15vw;
            }
            .swiper .swiper-wrapper .swiper-slide img {
                width: 30%;
            }

        }
    }
</style>