come posso creare una modale con un'immagine e il link della modale è l'immagine stessa (su una versione più piccola))

Question

Voglio mostrare qualche immagine in una galleria di miniature in cui se si fa clic su un'immagine allora apparirà più grande in un modale.

Se tengo il collegamento del modale come un'immagine, quindi non mostra nulla nell'intestazione o nel piè di pagina diverso dal segno di chiusura nell'angolo in alto a destra.

Sto utilizzando il bootstrap. Voglio anche sapere se potrei sostituire il tag img con il tag <a> per aprire la sezione modale. Per favore aiuto.

Ecco il codice:

<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

lo si può fare solo con Bootstrap, ma questo è ciò che sembra che avrebbe aiutato per quello che si vuole fare: https://blueimp.github.io/Bootstrap-Image-Gallery/

Lo uso su alcuni dei miei siti web esattamente per questo caso.

Answer 2

prova questo plugin Bootstrap-Image-Gallery ti aiuterà. controllo Demo.

Answer 3

Usa modal event listener e passare l'immagine modale

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 
    }); 
}); 

aggiungere id="showimg" al tag immagine <img> in Modal corpo

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

Fiddle with <img> tag

Sì, è possibile anche fare con <a> tag

<a> tag script ascoltatore

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

e l'evento sarà

$(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