Estou criando um modal para exibir uma galeria e a ideia é que, quando clicado nas imagens, o modal busque no background-image de cada <img>
e aplique no src.
O modal funciona, mas a imagem não aparece porque o src ta vazio e não consigo fazer o vinclo. Já tentei vários métodos e não consegui resultado.
Cada <img>
tem uma ID, e cada ID tem seu background-image. A estrutura ficou assim:
$('.img').click(function(evento){
var imagem = evento.target.src;
var modal = '<div id="modal"><img src="'+ imagem + '" class="modalImagem"><div id="btFecha">X</div></div>';
$('body').append(modal);
})
#i1 {
background-image: url(../_img/ilustracao001.jpg);
}
#w1 {
background-image: url(../_img/web001.jpg);
}
#d1 {
background-image: url(../_img/dg001.jpg);
}
<div class="menuPort">
<ul id="galeria">
<li><img id="i1" class="img ilustra" src=""></li>
<li><img id="w1" class="img wd" src=""></li>
<li><img id="d1" class="img dg" src=""></li>
</ul>
</div
Alguem sabe o que preciso fazer pra isso funcinar?