How can I click on an image and display it on a popup, when this image is inside an infowindow (leaflet)

I'm using the leaflet maps, and I have some images inside the infowindow of each marker. Howerver when I click on the image I want to display the image with a bigger resolution. I've tried all the examples of w3schools and other websites but they're not working because I have the images on an infowindow instead of "regular" html. NOTE: The html code of the infowindow is in the variable "infowindow".

$(document).ready(function () {
    $.ajax({
        type: 'GET',
        url: '/api/IgnicoesAPI',
        datatype: JSON,
        success: function (data) {
            $.each(data, function (i, item) {
                var infowindow = '<div id="content">' +
                    '<div id="siteNotice">' +
                    '</div>' +
                    '<div id="bodyContent">' +
                    '<p><b>Avaliação da Ocorrência:</b></p>' +
                    'Fotografias:' + '<div class="slider-holder">' +
                    '<span id="slider-image-1"></span>' +
                    '<span id="slider-image-2"></span>' +
                    '<span id="slider-image-3"></span>' +
                    '<div class="image-holder">' +
                    '<img src="https://ec.europa.eu/jrc/sites/jrcsh/files/styles/normal-responsive/public/ar_forest_fires_brais_seara_adobestock_199370851.jpeg?itok=wxRIC7ZX" class="slider-image" style="width:60px; height:60px"  />' +
                    '<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTGlNA19yPsHNHW-n4mF3uhK7SnGkm029xfdQ1EhSyDPEmaGDM_" class="slider-image" style="width:60px; height:60px"/>' +
                    '<img src="https://wpde.com/resources/media/83f69602-210f-4ad1-bad0-bd5cf19470c7-large16x9_MARIONWOODSFIRE2.jpeg?1553519933510https://wpde.com/resources/media/83f69602-210f-4ad1-bad0-bd5cf19470c7-large16x9_MARIONWOODSFIRE2.jpeg?1553519933510" class="slider-image" style="width:60px; height:60px"/>' +
                    '</div>' +
                    '<div class="button-holder">' +
                    '<a href="#slider-image-1" class="slider-change"></a>' +
                    '<a href="#slider-image-2" class="slider-change"></a>' +
                    '<a href="#slider-image-3" class="slider-change"></a>' +
                    '</div>' +
                    '</div> ' +
                    '<p>Avaliação:' + item.estado + '</p>' +
                    '<p>Data:' + /*item.listaOcorrencias*/ + '</p></br>' +
                    '<button id="aceite" onclick="aceite()">Aceitar</button>' +
                    '<button id="recusado" onclick="recusado()">Recusar</button>' +
                    //'<button> Em avaliação</button>' +
                    '<button id="concluido" onclick="concluido()"> Concluído</button>' +
                    '</div>';
                var greenIcon = L.icon({
                    iconUrl: 'https://cdn3.iconfinder.com/data/icons/basicolor-signs-warnings/24/186_fire-512.png',
                    iconSize: [35, 35], // size of the icon
                    shadowSize: [50, 64], // size of the shadow
                    iconAnchor: [22, 94], // point of the icon which will correspond to marker's location
                    shadowAnchor: [4, 62],  // the same for the shadow
                    popupAnchor: [-3, -76] // point from which the popup should open relative to the iconAnchor


                });
                var marker = new L.marker([item.latitude, item.longitude], { icon: greenIcon })
                    .bindPopup(infowindow)
                    .on('click', onClick)
                    .addTo(map);

                $('#json map').append(marker);

            });
        },
        error: function (err) {
            console.error(err);
        }

    });
});

What should I do?