En Bootstrap abrir Ampliar imagen en modal

Solución:

Puede probar este código si está utilizando bootstrap 3:

HTML

<a href="https://foroayuda.es/#" id="pop">
    <img id="imageresource" src="http://patyshibuya.com.br/wp-content/uploads/2014/04/04.jpg" style="width: 400px; height: 264px;">
    Click to Enlarge
</a>

<!-- Creates the bootstrap modal where the image will appear -->
<div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel">Image preview</h4>
      </div>
      <div class="modal-body">
        <img src="" id="imagepreview" style="width: 400px; height: 264px;" >
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

JavaScript:

$("#pop").on("click", function() {
   $('#imagepreview').attr('src', $('#imageresource').attr('src')); // here asign the image to the modal when the user click the enlarge link
   $('#imagemodal').modal('show'); // imagemodal is the id attribute assigned to the bootstrap modal, then i use the show function
});

Este es el violín de trabajo. Espero que esto ayude 🙂

Lo he cambiado un poquito pero todavía no puedo hacer pocas cosas.

Agregué que al hacer clic en él para cerrarlo, fue fácil pero muy funcional.

 <div class="modal-dialog" data-dismiss="modal">

También necesito una descripción diferente debajo de cada foto. Agregué una descripción en el pie de página solo para mostrar lo que necesito. Necesita cambiar con cada foto.

HTML

<div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" data-dismiss="modal">
      <div class="modal-content"  >              
        <div class="modal-body">
          <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
             <img src="" class="imagepreview" style="width: 100%;" >
        </div> 
     <div class="modal-footer">
       <div class="col-xs-12">
           <p class="text-left">1. line of description<br>2. line of description <br>3. line of description</p>
       </div>
     </div>         
   </div>
 </div>

JavaScript:

$(function() {
    $('.pop').on('click', function() {
        $('.imagepreview').attr('src', $(this).find('img').attr('src'));
        $('#imagemodal').modal('show');   
    });     
});

También sería bueno si esta ventana se abriera solo en el 100% de la pantalla. Aquí la imagen en el interior con la descripción tiene más del 100% y se puede desplazar … y si la pantalla es mucho más grande que las imágenes, debe detenerse solo en el tamaño original. por ej. 900 px y no mayor en altura.

http://jsfiddle.net/2ve4hbmm/

Este complemento me funciona muy bien.

Complemento de caja de luz Bootstrap 3

---

---

Utiliza Nuestro Buscador