Open Image in Modal Bootstrap Dynamically

Navigation
4

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

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>

Can anyone help me?

    
asked by anonymous 26.03.2016 / 21:43

1 answer

2

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

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

Example; 

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

See working at jsfiddle

If there is any delay in displaying the image you can put inside the 'show.bs.modal' event, more details can be found in the documentation itself

    
26.03.2016 / 22:48
\ n does not work in IE8 - JavaScript Is "new DOMParser" safer than "document.createElement"?