So öffnen Sie ein modales Bild für mehrere Bilder

Question

auf w3schools Website habe ich ein Tutorial für ein Dialogfeld/Popup-Fenster gefunden. Ich möchte das mit mehr Bildern umsetzen.

mein Code:

<img onclick="openModal()" src="low/dn-64.jpg" data-highres="high/dn-64.jpg" width="300" height="400"> 

<!-- Modal --> 
<div id="myModal" class="modal"> 
    <!-- Close button --> 
    <span class="close">&times;</span> 
    <!-- Modal content --> 
    <img class="modal-content" id="modal-image"> 
</div> 

<script type="text/javascript"> 
    var modal = document.getElementById('myModal'); 
    var img = document.getElementById('myImg'); 
    var modalImg = document.getElementById('modal-image'); 

    function openModal() { 
     modal.style.display = "block"; 
     modalImg.src = this.getAttribute("data-highres"); 
    } 

    /*img.onclick = function() { 
    modal.style.display = "block"; 
    modalImg.src = this.getAttribute("data-highres"); 
    }*/ 

    var span = document.getElementsByClassName("close")[0]; 

    span.onclick = function() { 
    modal.style.display = "none"; 
    } 

    window.onclick = function() { 
    if(event.target == modal) { 
     modal.style.display = "none"; 
     } 
    } 
</script> 

css:

#myImg { 
    cursor: zoom-in; 
    transition: 0.3s; 
    } 

    #myImg:hover { 
    opacity: 0.7; 
    } 

    .modal { 
    display: none; 
    position: fixed; 
    z-index: 1; 
    padding-top: 60px; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.8); 
    } 

    .modal-content { 
    margin: auto; 
    display: block; 
    width: 80%; 
    max-width: 700px; 
    } 

    .close { 
    position: absolute; 
    top: 15px; 
    right: 35px; 
    color: #f1f1f1; 
    font-size: 50px; 
    font-weight: bold; 
    transition: 0.3s; 
    } 

    .close:hover, 
    .close:focus { 
    color: #bbbbbb; 
    text-decoration: none; 
    cursor: pointer; 
    } 

der Code für ein Bild zu arbeiten. Also habe ich eine Funktion openModal() hinzugefügt und einen Teil des vorherigen Codes auskommentieren. Aber jetzt funktioniert das nicht einmal für ein Bild, es öffnet das Modal ohne das Bild.

danken Ihnen für Ihre Hilfe

Answer 1

Der Fehler in der Konsole Uncaught ReferenceError: openModal is not defined ist. Dies bedeutet, dass die Funktion in einem Bereich ausgeführt wurde, in dem sie nicht definiert wurde. eine einfache Lösung wäre es in einem globalen Rahmen zu definieren, wie Fenster:

window.openModal = function(img) { 
    modal.style.display = "block"; 
    modalImg.src = img.getAttribute("data-highres"); 
} 

und dann

<img onclick="openModal(this);" src="low/dn-64.jpg" data-highres="high/dn-64.jpg" width="300" height="400"> 

---

Sie sollten jedoch nicht nicht Onclick verwenden mehr verwenden (w3schools ist ein bisschen alt jetzt) ​​wie this answer says.

Sie möchten einen Ereignis-Listener an Ihre Bilder anhängen. Blättern Sie durch alle Ihre Bilder und verwenden Sie die addEventListener('click' ...) zu hören, wenn sie geklickt wurden.

var images = document.querySelectorAll('img'); 
for(var i=0, len = images.length; i < len; i++){ 
    images[i].addEventListener('click', openModal); 
}