Dynamically Open Image in Modal Bootstrap

Question

My intention is the following, after generating the list of images by PHP, I wanted that when I clicked on some of the images it opened in a modal dynamically, where I would pass the address of the image by some parameter and it opened in the modal of bootstrap/jquery.

EX:

<a href="#" parametro="imagem1.jpg" id="abrirModal" ><img src="imagem1.jpg" /></a>
<a href="#" parametro="imagem2.jpg" id="abrirModal" ><img src="imagem2.jpg" /></a>
<a href="#" parametro="imagem3.jpg" id="abrirModal" ><img src="imagem3.jpg" /></a>
<a href="#" parametro="imagem4.jpg" id="abrirModal" ><img src="imagem4.jpg" /></a>

Someone can help me?

Answer 1

And very simple, just include the modal, which you can find in the bootstrap documentation and exchange the id’s for class as mentioned by Guilherme Nascimento.

After that you will need an event to open the modal, and take the image url and set in the modal img.

Example;

$(".abrirModal").click(function() {
  var url = $(this).find("img").attr("src");
  $("#myModal img").attr("src", url);
  $("#myModal").modal("show");
});

See working on jsfiddle

If there is any delay in showing the image you can put inside the event 'show.bs.modal', more details can be found in the documentation itself http://getbootstrap.com/javascript/#modals