Twitter bootstrap-modal para imágenes

Question

Tengo una página que incluye detalles de los usuarios registrados. Cada tabla html incluye 80-90 usuarios. Para cada usuario hay una variable $ username. Normalmente, muestro sus imágenes en una tabla como la del siguiente código.

print "<a href=\"small-avatar-$username.jpg\" target=\"_blank\"> 
<img src=\"big-avatar-$username.jpg\"> 
</a>"; 

Pero el usuario puede abrir imágenes en una nueva pestaña. Quiero mostrar grandes avatares fácilmente. Mi primera opción fue lightbox-jquery. Pero debido a que utilizo twitter-bootstrap en mi sitio, decidí usar las funciones predeterminadas bootstrap y jquery.

Vi que hay "bootstrap-modales". Cuando el usuario hace clic en el enlace, no planeo mostrar nada más que una gran imagen.

yo probamos este:

print "<a href=\"#$username" data-toggle=\"modal\" class=\"img-modal\" > 
     <img src=\"small-avatar-$username.jpg\" ></a>"; 
print '</td>'; 

.

print "<div id=\"$username\" class=\"modal\">"; 
     <img src=\"big-avatar-$username.jpg\"> 
print "</div>"; 

.

<script type="text/javascript" id="js"> 
     $('#username').modal(); 
</script> 

supongo poner $('#username').modal();
para cada usuario a mi página hará archivo HTML enorme.

Pero luego probé el nombre de la clase del ancla de esta manera: $('.img-modal').modal();
Pero esto no funcionó.

¿Qué recomendarías en esta situación?

Answer 1

Yo le recomendaría usar un HTML5 Custom Data Attributes en su etiqueta <a> para identificar el nombre de usuario y mantener su clase img-modal.

"<a href="#myModal" data-username='".$username."' class="img-modal">... 

Gatillo la llamada modal al hacer clic en .img-modal (que no es necesario que los datos de palanca-= "modal")

$('.img-modal').click(function(event) { 

que pueda obtener el valor del nombre de usuario por utilizando

var username = $(this).attr('data-username') 

Puesto que usted tiene el nombre de usuario puede reemplazar la propiedad src de su etiqueta <img> en su modal única con algo así.

$("#img-in-modal").attr("src","big-avatar-" + username + ".jpg") 

y abrir su modal

$('#myModal').modal('show') 

Y por último, asegúrese de arranque-modal.js o boostrap.js está incluido.