Modal-Bildergalerien - mehrere Bilder

Ich bin derzeit versucht, ein Bild zu machen, Galerie basiert auf dem code hier: http://www.w3schools.com/howto/howto_css_modal_images.asp

Dieser code funktioniert für ein einzelnes Bild, aber es funktioniert nicht, wenn Sie versuchen, und fügen Sie mehr. Ich glaube, das hat zu tun mit der javascript-IDs, aber wenn ich versuche, verwenden Sie Klassen anstelle von IDs, der code wird nicht funktionieren.

Hat jemand hatte kein Glück mit diesem Beispiel von W3 Schools zu schaffen, eine funktionierende Galerie?

Dank! 🙂

Hier ist die HTML-und javascript aus dem Körper von meinem code.

    <div class="container" id="gallery">

        <h1>Gallery</h1>

        <!-- Trigger the Modal -->
        <img id="thumbnail-01" class="myImg" src="images/thumbnail.jpg" alt="Trolltunga, Norway" width="300" height="200">

        <!-- The Modal -->
        <div id="myModal" class="modal">

          <!-- The Close Button -->
          <span class="close" onclick="document.getElementById('myModal').style.display='none'">&times;</span>

          <!-- Modal Content (The Image) -->
          <img class="modal-content" id="modal-image">

          <!-- Modal Caption (Image Text) -->
          <div id="caption"></div>
        </div>

        <!-- Trigger the Modal -->
        <img id="thumbnail-02" class="myImg" src="images/thumbnail.jpg" alt="Trolltunga, Norway" width="300" height="200">

        <!-- The Modal -->
        <div id="myModal" class="modal">

          <!-- The Close Button -->
          <span class="close" onclick="document.getElementById('myModal').style.display='none'">&times;</span>

          <!-- Modal Content (The Image) -->
          <img class="modal-content" id="modal-image">

          <!-- Modal Caption (Image Text) -->
          <div id="caption"></div>
        </div>

    </div>


 <script>
    //Get the modal
    var modal = document.getElementById('myModal');

    //Get the image and insert it inside the modal - use its "alt" text as a caption
    var img = document.getElementsByClassName('myImg');
    var modalImg = document.getElementById("modal-image");
    var captionText = document.getElementById("caption");
    img.onclick = function(){
        modal.style.display = "block";
        modalImg.src = this.src;
        captionText.innerHTML = this.alt;
    }

    //Get the <span> element that closes the modal
    var span = document.getElementsByClassName("close")[0];

    //When the user clicks on <span> (x), close the modal
    span.onclick = function() { 
      modal.style.display = "none";
    }
</script>
was haben Sie bisher ausprobiert? fügen Sie Ihren code
willst du eine Antwort mit jquery?
Hinzugefügt mein code. Ich bin derzeit mit bootstrap für dieses Projekt, also bin ich cool mit jquery verwendet in der Lösung. 🙂
Wissen Sie, PhotoSwipe?

InformationsquelleAutor tanka2d | 2016-12-22

  1. 2

    Verwenden Sie nur ein Image -, Modal-block,und verwenden Sie diese modal-block, um verschiedene Bilder,alle Bilder müssen die gleichen Klassennamen(in diesem Beispiel "myImg"),und fügen Sie folgenden javascript. Ich hoffe, das ist hilfreich.

    var modal = document.getElementById("myModal");
var i;

var img = document.getElementsByClassName("myImg");
var modalImg = document.getElementById("img01");

 for(i=0;i< img.length;i++)
   {    
    img[i].onclick = function(){

    modal.style.display = "block";
       modalImg.src = this.src;

 }
}

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


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

    InformationsquelleAutor Rahul waghmare

Schreibe einen Kommentar