Enlarge a picture after clicking on it

Viewed 73

I need to enlarge a picture when I click on it. The problem is that I get this image in my javascript from my database and I don't know how I can do it to change the size of my picture after the click

Here is the js function that use data to create the picture

function loadSynthese(data) {
$.ajax({
    cache: false,
    url: "data/loadSynthese",
    type: "POST",
    async: true,
    data: ({
        dateid: data,
    }),
    success: function (response, status) {

            response.forEach(element => {
                css = "";
                idonglet = element["id_onglet"];
                idprio = element["id_prio"];
                texte = element["texte"];
                image = element["image_aide"];
                
                
                if(image === '' || image === null || image === undefined){
                    htmlPrio = '<div class="intPrio"><p class="titreP">Priorité ' + k + '' + pilote + '</p><img id="' + idonglet + 'imgCheck' + idprio + '" onclick="selectPrioSynth(' + idonglet + ', ' + idprio + ', this)" ' + css + ' alt="Sélectionner la priorité" data-idprio="' + idprio + '"></div><label class="textPrioSynth" onclick="selectPrioSynth(' + idonglet + ', ' + idprio + ', this)" data-idprio="' + idprio + '">' + texte + '</label>';
                } else {
                    img = '</br><img id="image'+ idprio + '" class="imageP" src="data:image/jpeg;base64,' + btoa(image) +'">';
                    htmlPrio = '<div class="intPrio"><p class="titreP">Priorité ' + k + '' + pilote + '</p><img id="' + idonglet + 'imgCheck' + idprio + '" onclick="selectPrioSynth(' + idonglet + ', ' + idprio + ', this)" ' + css + ' alt="Sélectionner la priorité" data-idprio="' + idprio + '"></div><label class="textPrioSynth" onclick="selectPrioSynth(' + idonglet + ', ' + idprio + ', this)" data-idprio="' + idprio + '">' + texte + '<p class="imageP" onclick="enlargeImg()">' +img+'</p></label>';
                }
                $("#" + idonglet + "ps").append(htmlPrio);

                
                ((nextid == idonglet) ? k++ : k = 1);
                j++; i++;
                ((j < response.length - 1) ? nextid = response[i]['id_onglet'] : "");

            });
        }

    },
    error: function (response, status) {
    }
});}

And here he function i want to add to change the size of the picture

function enlargeImg(img) {
    img.style.width = "60%";
    img.style.height = "auto";
    img.style.transition = "width 0.5s ease";}

And When i click on the picture I have this issue : "Uncaught TypeError: Cannot read properties of undefined (reading 'style')"

1 Answers

You can add or remove a css class some-name which has transform:scale(1.5) whereas your img has transition: 0.5s

img {
  transition: 0.5s;
}

img:hover,
.some-class {
  transform: scale(1.5)
}
<img src="https://picsum.photos/200" style="margin:40px">

Related