Wie verwende ich das Bootstrap-Modal für mehrere Bilder auf derselben Seite im Bild?

Ich habe ungefähr 18 Bilder auf der Seite, die ich beim Klicken auf das Bild in einem Modal vergrößern möchte, aber es wird jedes Mal nur das erste Bild angezeigt.

Ich habe versucht, das DOM mit @ zu durchlaufe$(this).find('img') und ich habe es mit Kindern versucht. Ich habe auch versucht, die Bilder auf verschiedene IDs und diese als Variable zu setzen.

Mein aktueller Versuch war, den Pfad des kleinen Bildes auf dieselbe ID wie den Pfad des größeren Bildes zu setzen und dann find zu verwenden. Ich habe nur die ersten beiden Bilder "eingerichtet", da ich es noch nicht zum Laufen bringen kann.

Übrigens, ich habe andere Methoden zum Heranzoomen sowie Popovers und Plug-Ins ohne Erfolg ausprobiert. Das ist das, was ich am ehesten an etwas herangekommen bin, das funktioniert.

Hinweis:Es gibt eine andere Frage, die fast dasselbe Problem zeigt, aber die Antwort dort hat bei mir nicht funktioniert.

<img  height="100" width="80" id="1" data-toggle="modal" data-target="#myModal" data-dismiss="modal" src='~/Content/MyPics/TextDollarPart1.JPG' alt='Text dollar code part one.' />  
<div id="myModal" class="modal fade" >
    <div class=" modal-lg">
        <div class="modal-content">
            <div class="modal-body">
                <img id="1"src="~/Content/MyPics/TextDollarPart1.JPG" class="img-responsive" height="1500" width="1000">
            </div>
        </div>
    </div>
</div>   
<img  height="100" width="80" id="2" data-toggle="modal" data-target="#myModal" data-dismiss="modal" src="~/Content/MyPics/TextDollarPart2.JPG" alt="Text dollar code part two." />
<div id="myModal" class="modal fade">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-body">
                <img id="2" src="~/Content/MyPics/TextDollarPart2.JPG" class="img-responsive" height="1500" width="1000">
            </div>
        </div>
    </div>
</div>

Skrip

$(document).ready(function () {       
    $('img').on('click', function () {
        var picID = $(this).attr('id');
         $(this).find('picID');
        $('picID').modal('toggle');      
    });
});

Antworten auf die Frage(8)

Ihre Antwort auf die Frage