javascriptjqueryhtmldeploymentlightbox2

Issue with lightbox2 modal not displaying images upon deployment

noob here and this is my first question. I am having issues with the lightbox2 modal not displaying images when I deploy the website. The modal appears to work with the exception of displaying the images. The modal also works perfectly on my text editor's (VSCode) live server/local host, but stops displaying the images when I upload the files on Hostinger. The website is https://takemehometransport.com. Any help is greatly appreciated.

I have researched and attemped several solutions, including similar questions on StackOverflow, but nothing has worked. I am using Chrome and Firefox as the browsers.

Here is my code...

<head>
    <link rel="stylesheet" href="css/lightbox.min.css">
    <link rel="stylesheet" href="css/main.css">
</head>

<body>
    <div id="galleryImages>
        <a href="Images/Gallery/Gallery1.jpg" data-lightbox="galleryModal"><img src="images/Gallery/Gallery1.jpg" alt=""></a>
        <a href="Images/Gallery/Gallery2.jpg" data-lightbox="galleryModal"><img src="images/Gallery/Gallery2.jpg" alt=""></a>
        <a href="Images/Gallery/Gallery3.jpg" data-lightbox="galleryModal"><img src="images/Gallery/Gallery3.jpg" alt=""></a>

    </div>

<!-- SCRIPTS -->
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
    <script type="text/javascript" src="js/lightbox.min.js"></script>
    <script type="text/javascript" src="js/main.js"></script>

</body>

Obviously, I am expecting to see the images displayed in the modal when called by clicking on the images on the gallery page.

Solution

  • The problem is the wrong typed link. Change the href="Images/Gallery/Gallery1.jpg" into href="images/Gallery/Gallery1.jpg" and it should work.