5

A minha intenção é o seguinte, depois de gerado a lista de imagens pelo PHP, queria que quando eu clicasse em alguma das imagens ela se abrisse em um modal dinamicamente, onde eu passaria o endereço da imagem por algum parametro e ela se abrisse no modal do 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>

Alguem pode me ajudar?

1
  • uma dica: id nunca pode se repetir Diego, id é igual identidade, só pode haver uma pra cada um. 26/03/2016 às 20:49

1 Resposta 1

2

E bem simples, apenas inclua a modal, que você pode encontrar na documentação do bootstrap e troque os id's por class como mencionado pelo Guilherme Nascimento.

Depois disso você precisara de um evento para abrir a modal, e pegar a url da imagem e setar na img da modal.

Exemplo;

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

Veja funcionando no jsfiddle

Se houver algum delay em mostrar a imagem você pode colocar dentro do evento 'show.bs.modal', mais detalhes podem ser encontrados na própria documentação http://getbootstrap.com/javascript/#modals

1
  • Funcionou perfeitamente, muito obrigado! valew. sou leigo em javascript/jquery. muito obrigado! 28/03/2016 às 17:22

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .