JavaScript Photo details display

JavaScript Project

To display photo details using JavaScript, you can create an interactive photo gallery that shows the details when a user clicks on a specific photo. Here's an example that demonstrates this functionality:

HTML Code:

<!DOCTYPE html>
<html>
<head>
    <title>Photo Gallery</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            font-family: Arial, sans-serif;
        }

        .gallery {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 20px;
        }

        .photo {
            width: 200px;
            height: 200px;
            background-color: lightgray;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 4px;
        }

        .photo-details {
            margin-top: 20px;
            font-size: 18px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="gallery">
        <div class="photo" onclick="showDetails('photo1.jpg', 'Photo 1', 'This is the first photo.')">Photo 1</div>
        <div class="photo" onclick="showDetails('photo2.jpg', 'Photo 2', 'This is the second photo.')">Photo 2</div>
        <div class="photo" onclick="showDetails('photo3.jpg', 'Photo 3', 'This is the third photo.')">Photo 3</div>
    </div>

    <div id="photo-details" class="photo-details">
        <img id="photo-image" src="" alt="Photo">
        <h3 id="photo-title"></h3>
        <p id="photo-description"></p>
    </div>

    <script src="photo-details.js"></script>
</body>
</html>

JavaScript (photo-details.js):

javascript
function showDetails(imageSrc, title, description) {
    const photoImage = document.getElementById('photo-image');
    const photoTitle = document.getElementById('photo-title');
    const photoDescription = document.getElementById('photo-description');

    photoImage.src = imageSrc;
    photoTitle.textContent = title;
    photoDescription.textContent = description;

    const photoDetails = document.getElementById('photo-details');
    photoDetails.style.display = 'block';
}

In this example, we have an HTML structure with a photo gallery represented by the `<div>` elements with the class "photo". Each photo element has an `onclick` attribute that calls the `showDetails` function with specific photo details.

The JavaScript code defines the `showDetails` function. It takes in the image source, title, and description as parameters. Inside the function, it updates the `src` attribute of the `photo-image` element with the provided image source, and sets the text content of the `photo-title` and `photo-description` elements with the provided title and description.

The `photo-details` element is initially hidden (`display: none`) but will be displayed (`display: block`) when the `showDetails` function is called.

When a user clicks on a photo in the gallery, the corresponding photo details are passed to the `showDetails` function, and the details are displayed in the designated photo details section.

Output:

About the Author

Silan Software

Silan Software is one of the India's leading provider of offline & online training for Java, Python, AI (Machine Learning, Deep Learning), Data Science, Software Development & many more emerging Technologies.

We provide Academic Training || Industrial Training || Corporate Training || Internship || Java || Python || AI using Python || Data Science etc

facebook.com/pythontpoint

twitter.com/pythontpoint

instagram.com/pythontpoint

PreviousNext

Join our newsletter for the latest updates.

About us

pythontpoint.org : The best online tutorial to learn Python, Machine Learning, Deep Learning, Data Science, Power BI, SQL & Java.
We Provide best Academic training, Corporate training, Project & Internship.

Our Services

Corporate & Academic Training
Website Designing
Website Development
Digital Marketing
Project & Thesis

Contact Us

Plot No-741, 2nd Floor, Jayadev Vihar, 751013, Bhubaneswar, Odisha
Call :
0674-2361252
Mail : info@silansoftware.com
Contact Us
Privacy Policy

Our Courses

Our Tutorials