Scribd Logo
Upload

Welcome to Scribd!

  • Week 5

    Uploaded by

    Ramu lal Sharma
    2 views2 pages

    Original Title

    Week5

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    2 views2 pages

    Week 5

    Uploaded by

    Ramu lal Sharma

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 2

    <!

    DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Gallery</title>
    <style>
    /* CSS for styling */
    .thumbnail-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    }

    .thumbnail {
    width: 100px;
    height: 100px;
    margin: 10px;
    cursor: pointer;
    }

    .full-image-container {
    text-align: center;
    }

    .full-image {
    max-width: 100%;
    max-height: 80vh;
    margin-top: 20px;
    }
    </style>
    </head>
    <body>
    <div class="thumbnail-container">
    <!-- Thumbnail images will be dynamically added here -->
    <img class="thumbnail" src="thumbnail1.jpg" alt="Thumbnail 1">
    <img class="thumbnail" src="thumbnail2.jpg" alt="Thumbnail 2">
    <img class="thumbnail" src="thumbnail3.jpg" alt="Thumbnail 3">
    <!-- Add more thumbnails as needed -->
    </div>

    <div class="full-image-container">
    <!-- Full-size image will be dynamically displayed here -->
    <img class="full-image" src="" alt="Full-size Image">
    </div>

    <script>
    // JavaScript for event handling and dynamic action
    const thumbnails = document.querySelectorAll('.thumbnail');
    const fullImage = document.querySelector('.full-image');

    // Add event listener to each thumbnail


    thumbnails.forEach(thumbnail => {
    thumbnail.addEventListener('click', () => {
    // Change the source of the full-size image to the clicked thumbnail's source
    fullImage.src = thumbnail.src;
    });
    });
    </script>
    </body>
    </html>

    You might also like