Clickable pictures in html and css

Question

i need your help

I have this html code :

 <!DOCTYPE html>
    <html>

      <head>
        <title>Test</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
        <link rel="stylesheet" type="text/css" href="./styles.css">
        <script type="text/javascript" src="test.js">
        </script>
      </head>

      <body>


        <div class="album py-5 bg-light">
          <div class="container">
            <br>
            <h1>Persons</h1><br>
            <div class="row">
              <div class="card-group">

                <div id="myData"></div>


              </div>
            </div>
          </div>
        </div>

My Javascript :

  fetch('test.json')//file json objects
        .then(function (response) {
            return response.json();
        })
        .then(function (data) {
            appendData(data);
        })
        .catch(function (err) {
            console.log('error: ' + err);
        });
function appendData(data) {
    var mainContainer = document.getElementById("myData");
    for (var i = 0; i < data.results.length; i++) {
        var img = document.createElement("img");
        img.src = data.results[i].picture.large;
        mainContainer.appendChild(img);
        var div = document.createElement("div");
        div.innerHTML = 'first: ' + data.results[i].name.first+ ' First Name :' + data.results[i].name.last;
        mainContainer.appendChild(div);
    }
}

This is a part of my json file :

{
    "number_of_results": 20,
    "results": [
        {
            "name": {
                "first": "Test",
                "last": "Test"
            },
            "date_of_birth": {
                "date": "1985-12-03T02:05:33",
                "age": 36
            },
            "picture": {
                "large": "apple.png",
            },
        },

when I click <div id="myData"></div> it displays image and informations, but now I want when I click on the pictures, open a window and displays the informations that i get on Javascript like first name or email

How can I do that ? Thanks for your help Jean

Answer 1

You can make a clickable picture like this

<a href="#"><img src="path/to/picture"/></a>

Thats one way

Answer 2

This finally would be working. I have used a file from my github repo to make the example working. But you can always that path.

 // You can replace your whole JS with this code fetch("https://raw.githubusercontent.com/ArunBohra33/json-data/main/clickable-pic") //file json objects .then(function (response) { return response.json(); }) .then(function (data) { appendData(data); }) .catch(function (err) { console.log("error: " + err); }); function appendData(data) { var mainContainer = document.getElementById("myData"); for (var i = 0; i < data.results.length; i++) { var img = document.createElement("img"); // New code // Add a id to the image img.setAttribute("id", "popup-image" + (i + 1)); img.src = data.results[i].picture.large; img.classList.add("popup-img"); img.setAttribute("data-data", JSON.stringify(data.results[i])); mainContainer.appendChild(img); // Old code var div = document.createElement("div"); div.innerHTML = "first: " + data.results[i].name.first + " First Name :" + data.results[i].name.last; mainContainer.appendChild(div); // if (i == data.results.length - 1) clickOnImg(); } for (let i = 0; i < data.results.length; i++) { document.querySelector(`#popup-image${i + 1}`).addEventListener("click", function () { var firstName = data.results[i].name.first; var lastName = data.results[i].name.last; showData(firstName, lastName, i + 1); }); } } // This function shows the modal with data in it function showData(firstName, lastName, index) { var popupBox = document.createElement("div"); popupBox.style.display = "flex"; popupBox.setAttribute("id", "popupBoxOverlay_{i}"); popupBox.classList.add("popupBox"); popupBox.innerHTML = `<div class="modal"> <span class="cross-btn-${index - 1}">&times;</span> <div class="fname"> <label>FirstName: </label> <span class="firstName${index - 1}">${firstName}</span> </div> <div class="lname"> <label>LastName: </label> <span id="lastName${index - 1}">${lastName}</span> </div> </div>`; document.body.prepend(popupBox); var crossBtn = document.querySelector(".cross-btn-" + (index - 1)); crossBtn.addEventListener("click", function () { popupBox.remove(); }); }

 /* // CSS CODE */ img { width: 200px; } .popupBox { position: fixed; background: rgba(0, 0, 0, .5); height: 100vh; width: 100vw; /* z-index: 100000; */ display: flex; justify-content: center; align-items: center; } .modal { display: flex; flex-direction: column; min-width: 60%; background: #fff; border-radius: 8px; position: relative; padding: 2rem; } [class^=cross-btn] { position: absolute; top: 10px; right: 10px; cursor: pointer; }

 <div class="album py-5 bg-light"> <div class="container"> <br> <h1>Persons</h1><br> <div class="row"> <div class="card-group"> <div id="myData"></div> </div> </div> </div> </div>

Clickable pictures in html and css

Question

2 answers

solution1
0 2021-11-14 11:16:37

solution2
0 2021-11-14 14:07:36

Clickable pictures in html and css

Question

2 answers

solution1 0 2021-11-14 11:16:37

solution2 0 2021-11-14 14:07:36

solution1
0 2021-11-14 11:16:37

solution2
0 2021-11-14 14:07:36