movie/public/js/desktop/movie/view.js

$(function () {
    $(window).trigger("resize");

    let mainImg = document.getElementById("btnMainImgEnlargement")
    mainImg.onclick = function () {
        popupCenter(this.value, this.title);
    };
});

$(window).resize(function () {
    toggleActorBtnMoreInfo($("section.actor"));
    toggleStaffBtnMoreInfo($("section.staff"));
});

let toggleActorBtnMoreInfo = function ($obj) {
    let $block = $obj.find("blockquote");
    let width = $block.textWidth();
    if (Number($block.innerWidth()) > width) {
        $obj.find("input").prop("hidden", true);
    } else {
        $obj.find("input").prop("hidden", false);
    }
}

let toggleStaffBtnMoreInfo = function ($obj) {
    let $block = $obj.find("blockquote")
    let width = 0;
    for (let row of $block.find("dl")) {
        width += Number($(row).width());
    }

    if (Number($block.width()) > width) {
        $obj.find("input").prop("hidden", true);
    } else {
        $obj.find("input").prop("hidden", false);
    }
}

let makePhotoSwipeImage = function (list) {
    for (let row of list) {
        if (row.firstChild == null) {
            continue;
        }
        const a = row.firstChild.nextSibling;
        const img = new Image();
        img.src = a.href;
        img.onload = function () {
            a.dataset.pswpWidth = this.width;
            a.dataset.pswpHeight = this.height;
        }
    }
}

new Swiper("#posters", {
    grabCursor: true,
    centeredSlides: false,
    a11y: true,
    loop: false,
    loopFillGroupWithBlank: false,
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
    breakpoints: {
        320: {
            slidesPerView: 4,
            spaceBetween: 10
        },
        800: {
            slidesPerView: 4,
            spaceBetween: 10
        },
        1000: {
            slidesPerView: 5,
            spaceBetween: 10
        },
        1200: {
            slidesPerView: 7,
            spaceBetween: 10
        },
        1400: {
            slidesPerView: 8,
            spaceBetween: 10
        },
        1700: {
            slidesPerView: 10,
            spaceBetween: 10
        },
        2000: {
            slidesPerView: 11,
            spaceBetween: 10
        },
        2200: {
            slidesPerView: 13,
            spaceBetween: 10
        },
        2500: {
            slidesPerView: 15,
            spaceBetween: 30
        }
    }
});

new Swiper("#stillCut", {
    grabCursor: true,
    centeredSlides: false,
    a11y: true,
    loop: false,
    loopFillGroupWithBlank: false,
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
    breakpoints: {
        320: {
            slidesPerView: 4,
            spaceBetween: 10
        },
        800: {
            slidesPerView: 4,
            spaceBetween: 10
        },
        1000: {
            slidesPerView: 5,
            spaceBetween: 10
        },
        1200: {
            slidesPerView: 7,
            spaceBetween: 10
        },
        1400: {
            slidesPerView: 8,
            spaceBetween: 10
        },
        1700: {
            slidesPerView: 10,
            spaceBetween: 10
        },
        2000: {
            slidesPerView: 11,
            spaceBetween: 10
        },
        2200: {
            slidesPerView: 13,
            spaceBetween: 10
        },
        2500: {
            slidesPerView: 15,
            spaceBetween: 30
        }
    }
});

let posters = document.getElementById("posters");
let stillCuts = document.getElementById("stillCut");
if (posters) {
    makePhotoSwipeImage(posters.querySelector(".swiper-wrapper").children);
    const posterBox = new PhotoSwipeLightbox({
        gallery: "#posters .swiper-wrapper",
        children: "a",
        thumbSelector: "img",
        mouseMovePan: true,
        showHideAnimationType: 'none',
        initialZoomLevel: 'fit',
        secondaryZoomLevel: 1.5,
        maxZoomLevel: 1,
        errorMsg: '이미지를 찾을 수 없습니다.',
        pswpModule: () => PhotoSwipe
    });
    posterBox.init();
}

if (stillCuts) {
    makePhotoSwipeImage(stillCuts.querySelector(".swiper-wrapper").children)
    const stillCutBox = new PhotoSwipeLightbox({
        gallery: "#stillCut .swiper-wrapper",
        children: "a",
        thumbSelector: "img",
        mouseMovePan: true,
        showHideAnimationType: "none",
        initialZoomLevel: 'fit',
        secondaryZoomLevel: 1.5,
        maxZoomLevel: 1,
        errorMsg: '이미지를 찾을 수 없습니다.',
        pswpModule: () => PhotoSwipe
    });
    stillCutBox.init();
}