What are the best practices for displaying images in a gallery with thumbnails that expand when clicked on?

To display images in a gallery with thumbnails that expand when clicked on, it is best to use a combination of HTML, CSS, and JavaScript. The thumbnails can be displayed in a grid layout, and when clicked on, a larger version of the image can be displayed in a modal or lightbox overlay. This allows for a clean and user-friendly way to showcase images in a gallery. 

<!DOCTYPE html>
<html>
<head>
    <title>Image Gallery</title>
    <style>
        .gallery {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            grid-gap: 10px;
        }
        .thumbnail {
            width: 100%;
            height: auto;
            cursor: pointer;
        }
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.9);
            z-index: 999;
        }
        .modal-content {
            display: block;
            margin: 10% auto;
            max-width: 80%;
            max-height: 80%;
        }
    </style>
</head>
<body>

<div class="gallery">
    <img class="thumbnail" src="image1.jpg" onclick="openModal('image1.jpg')">
    <img class="thumbnail" src="image2.jpg" onclick="openModal('image2.jpg')">
    <img class="thumbnail" src="image3.jpg" onclick="openModal('image3.jpg')">
</div>

<div id="myModal" class="modal">
    <img class="modal-content" id="modalImg">
</div>

<script>
    function openModal(image) {
        var modal = document.getElementById('myModal');
        var modalImg = document.getElementById('modalImg');
        modal.style.display = "block";
        modalImg.src = image;
    }

    var modal = document.getElementById('myModal');
    modal.onclick = function() {
        modal.style.display = "none";
    }
</script>

</body>
</html>

Keywords

image gallery thumbnails expand click event PHP functions

Related Questions