Question

我正在使用sachinchoolur的lightgallery模式，并实现了在VSCode的实时服务器中完美运行的代码。但是，当我通过Hostinger部署代码时，该模式无法正常工作。当我单击缩略图图像时（在投资组合部分的左上角缩略图图像），而不是弹出带有图片的模态，它在我的网站底部添加/显示图片。我的网站是https://p2-dev.com。

HTML
<head>
    <link type="text/css" rel="stylesheet" href="css/lightGallery.min.css" /> 
</head>

<body>
    <div id="lightgallery">
        <a href="images/Portfolio Images/takemehome~screenshot.png" class="image fit">
            <img src="images/Portfolio Images/takemehome~screenshot.png" alt="" />
        </a>
        <a href="images/Portfolio Images/takemehome~mac.png" id="modalImage" class="image fit">
            <img src="images/Portfolio Images/takemehome~mac.png" alt="" />
        </a>
        <a href="images/Portfolio Images/takemehome-iphone1.png" id="modalImage" class="image fit">
            <img src="images/Portfolio Images/takemehome-iphone1.png" alt="" />
        </a>
        <a href="images/Portfolio Images/takemehome-ipad.png" id="modalImage" class="image fit">
            <img src="images/Portfolio Images/takemehome-ipad.png" alt="" />
        </a>
    </div>

    <!--  JQuery  -->
    <script src="https://code.jquery.com/jquery-3.2.1.js"></script>

    <!--  JQuery Lightgallery  -->
    <script src="js/lightgallery.min.js"></script>

    <!-- Lightgallery Plugins -->
    <script src="js/lg-thumbnail.min.js"></script>
    <script src="js/lg-fullscreen.min.js"></script>
    <script src="js/lg-zoom.min.js"></script>
</body>

CSS
/* Images to appear in lightgallery modal only */
#modalImage {
display: none;
}

我希望图像以弹出模式出现，而不是出现在网页底部。

lightgallery在部署后无法正常工作

0 个答案: