En Bootstrap abierto Ampliar imagen en modal

Haz todo lo posible por interpretar el código bien antes de aplicarlo a tu trabajo y si tquieres aportar algo puedes comentarlo.

Solución:

Puedes probar este código si estás usando bootstrap 3:

HTML

    
    Click to Enlarge










  

    

      

        ×Close
        
Image preview
      
      

        
      
      

        Close
      
    
  

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 poco, pero todavía no puedo hacer algunas cosas.

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

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. Tiene que cambiar con cada foto.

HTML

    

      
              
        

          ×Close
             
        
 
     

       

           
1. line of description
2. line of description 
3. line of description
       
     
         
   
 

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 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 funciona muy bien para mí.

Complemento de caja de luz Bootstrap 3

valoraciones y comentarios

Recuerda que puedes comunicar esta reseña si te valió la pena.

---

---

Utiliza Nuestro Buscador