Twitter bootstrap modal no muestra la imagen correcta

Tengo problemas para mostrar el modal de la imagen específica en la que se hizo clic para ver.

Si uso un enlace con una clase, mostrará todas las imágenes en ese álbum en modales separados (tengo que cerrarlas todas). Quiero mostrar el modal apropiado para la imagen en la que hago clic en "ver" para que corresponda.

Si configuro esto en id y creo una id en el div superior, solo mostrará la primera imagen en el álbum, sin importar en qué imagen haga clic.

¿Cómo podría solucionar esto?

<a class="btn btn-link" href=".modal" data-toggle="modal"><i class="icon-fullscreen"></i>     View</a>

<!--POP OVER OF IMAGE-->
<div class="modal hide fade"  tabindex="-1">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h3 id="myModalLabel">Pansnap</h3>

</div>
<div class="modal-body">

<!--This is for the 360 viewer-->

<?php echo '<img src="uploads/', $image["album"], '/', $image["id"], '.',     $image["ext"],'"/>'?>

<!--360 viewer end-->

  </div>
  <div class="modal-footer">
 <?php echo '<a class="btn btn-link" href="uploads/', $image["album"], '/', $image["id"],     '.', $image["ext"],'">Download</a>'?>

  </div>
</div>

preguntado el 08 de marzo de 13 a las 21:03

Su código de ejemplo no tiene más de uno o por lo que es difícil de decir, pero mi primera suposición sería que debe hacer que cada nombre de identificación sea único. ¿Podría proporcionar más de su código? -

1 Respuestas

Una forma de abordar esto es almacenar los diversos componentes de datos únicos en cada uno de los enlaces y luego tener un controlador genérico que cargará esos datos en los elementos relevantes de un solo modal.

Por ejemplo, algo como:

HTML

<a class="btn btn-link" href="#imageModal" data-toggle="modal" data-image="uploads/album/01.jpg" data-download="uploads/album/01.jpg"><i class="icon-fullscreen"></i>     View</a>
<a class="btn btn-link" href="#imageModal" data-toggle="modal" data-image="uploads/album/02.jpg" data-download="uploads/album/02.jpg"><i class="icon-fullscreen"></i>     View</a>

<!--POP OVER OF IMAGE-->
<div id="imageModal" class="modal hide fade"  tabindex="-1">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h3 id="myModalLabel">Pansnap</h3>
  </div>
  <div class="modal-body">
    <img id="snap"/>
  </div>
  <div class="modal-footer">
      <a id="download" class="btn btn-link">Download</a>
  </div>
</div>

Donde podría cargar los datos de cada imagen en los atributos de datos a través de PHP.

JS

$(document).on('click.modal.image-data', '[href=#imageModal]', function () {
  $('#snap').attr('src',$(this).data('image'))
  $('#download').attr('href', $(this).data('download'))  
})

Esto cargará los datos apropiados en los elementos modales.

JSFiddle

respondido 23 mar '13, 16:03

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.