0

I'm working on a product image gallery using a W3school tutorial. However after modifying the images they don't load correctly and I don't understand why. I created a quick representation in Codepen however for the real project I'm using visual studio with a img/ folder https://codepen.io/FallenPrinceBelial/pen/vYraEvo

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            font-family: Arial;
        }

        /* The grid: Four equal columns that floats next to each other */
        .column {
            float: left;
            width: 25%;
            padding: 10px;
        }

            /* Style the images inside the grid */
            .column img {
                opacity: 0.8;
                cursor: pointer;
            }

                .column img:hover {
                    opacity: 1;
                }

        /* Clear floats after the columns */
        .row:after {
            content: "";
            display: table;
            clear: both;
        }

        /* The expanding image container */
        .container {
            position: relative;
            display: none;
        }

        /* Expanding image text */
        #imgtext {
            position: absolute;
            bottom: 15px;
            left: 15px;
            color: white;
            font-size: 20px;
        }

        /* Closable button inside the expanded image */
        .closebtn {
            position: absolute;
            top: 10px;
            right: 15px;
            color: white;
            font-size: 35px;
            cursor: pointer;
        }
    </style>
</head>
<body>

    <div style="text-align:center">
        <h2>Tabbed Image Gallery</h2>
        <p>Click on the images below:</p>
    </div>

    <!-- The four columns -->
    <div class="row">
        <div class="column">
            <img src="img/LightingModel#1.jpg" alt="Lighting Model #1" style="width:100%" onclick="myFunction(this);">
        </div>
        <div class="column">
            <img src="img/LightingModel#2.jpeg" alt="Lighting Model #2" style="width:100%" onclick="myFunction(this);">
        </div>
        <div class="column">
            <img src="img/LightingModel#3.jpg" alt="Lighting Model #3" style="width:100%" onclick="myFunction(this);">
        </div>
        <div class="column">
            <img src="img/LightingModel#4.jpg" alt="Lighting Model #4" style="width:100%" onclick="myFunction(this);">
        </div>
    </div>

    <div class="container">
        <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
        <img id="expandedImg" style="width:100%">
        <div id="imgtext"></div>
    </div>

    <script>
function myFunction(imgs) {
  var expandImg = document.getElementById("expandedImg");
  var imgText = document.getElementById("imgtext");
  expandImg.src = imgs.src;
  imgText.innerHTML = imgs.alt;
  expandImg.parentElement.style.display = "block";
}
    </script>

</body>
</html>

I tried replacing the images, I made sure the images were all correct.

Fukokami
  • 21
  • 2
  • When you ask a question please try to remove any unnecessary information. You could remove all the CSS. If that cures your problem then you have narrowed down the possible solutions. If it does not cure your problem then leave the CSS out because it is irrelevant. The same goes for the JavaScript. And the same goes for three out of the four images. You only need to present one as it is probable that they all have the same problem so there is no need to consider 4 images when 1 will do. The more consideration you give to people who can help you the more they will help you. – user3425506 Nov 28 '22 at 12:19

0 Answers0