Wie könnte ich ein Modal mit einem Bild darin erstellen und die Verknüpfung des Modals ist das Bild selbst (auf einer kleineren Version))

Question

Ich möchte ein Bild in einer Miniaturansichtsgalerie zeigen, in der, wenn Sie ein Bild klicken Sie dann erscheint in einem Modal größer.

Wenn ich die Verbindung des Modals als ein Bild behalte, dann zeigt es nichts in der Kopf- oder Fußzeile außer dem nahen Zeichen in der oberen rechten Ecke.

Ich benutze Bootstrap. Ich möchte auch wissen, ob ich den img Umbau zum <a> Umbau ersetzen könnte, um den modalen Abschnitt zu öffnen. Bitte helfen Sie. Hier

ist der Code:

<div class="col-lg-3 col-md-4 col-xs-6 thumb"> 
     <img id="image-modal" class="img-responsive img-rounded" src="<?php echo base_url();?>img/Desert.jpg" data-target="#myModal" data-toggle="modal" alt=""> 
     <div class="modal fade" id="myModal" role="dialog"> 
      <div class="modal-dialog"> 
       <!-- Modal content--> 
       <div class="modal-content"> 
        <div class="modal-header"> 
         <button type="button" class="close" data-dismiss="modal">&times;</button> 
         <h4 class="modal-title">Modal Header</h4> 
        </div> 
        <div class="modal-body"> 
         <img class="img-responsive" src="<?php echo base_url();?>img/Desert.jpg" alt=""> 
        </div> 
        <div class="modal-footer"> 
         <p>This is footer</p> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 

Answer 1

Sie es nur mit Bootstrap tun können, aber das ist, was scheint, wie es helfen würde für das, was Sie tun möchten: https://blueimp.github.io/Bootstrap-Image-Gallery/

Ich benutze es auf einigen meiner Webseiten genau für diesen Fall.

Answer 2

versuchen Sie diese Bootstrap-Image-Gallery Plugin wird Ihnen helfen. überprüfen Demo.

Answer 3

Verwenden modal event listener und das Bild übergeben modalen

Script

$(document).ready(function() { 
    $('#myModal').on('show.bs.modal', function (e) { 
     var img = $(e.relatedTarget).attr('src'); // get image 
     $('#showimg').attr('src' , img); //load image in modal 
    }); 
}); 

hinzufügen id="showimg" zu Bildtag <img> in Modal Körper

<div class="modal-body"> 
    <img class="img-responsive" src="" alt="" id="showimg"> 
</div> 

Fiddle with <img> tag

Ja, Sie auch tun können, es mit <a> Tag

<a> Tag

<a class="btn btn-primary btn-xs" href="imagepath" data-target="#myModal" data-toggle="modal">Open Image</a> 

und Zuhörer Skript Veranstaltung wird

$(document).ready(function() { 
    $('#myModal').on('show.bs.modal', function (e) { 
     var img = $(e.relatedTarget).attr('href'); // get image with <a> tag 
     $('#showimg').attr('src' , img); //load image in modal 
    }); 
}); 

Fiddle with <a> tag