Lightgallery не работает должным образом при развертывании - PullRequest
Новая
       38

Lightgallery не работает должным образом при развертывании

0 голосов
/ 30 сентября 2019

Я пользуюсь модальностью lightgallery от sachinchoolur и внедрил код, который отлично работает на живом сервере VSCode. Но при развертывании кода через Hostinger модальный режим не работает должным образом. Когда я щелкаю по уменьшенному изображению (верхнее левое изображение thubmnail в разделе портфолио), вместо того, чтобы показывать модал с изображениями, он добавляет / отображает изображения внизу моего сайта. Мой веб-сайт 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;
}

Я хочу, чтобы изображения появлялись во всплывающем моде, а не в нижней части веб-страницы.

...