I'm creating a modal to display a gallery and the idea is that, when clicked on the images, the modal searches the background-image of each <img>
and applies to the src.
The modal works, but the image does not appear because the src is empty and I can not make the link. I tried several methods and I did not get results.
Each <img>
has an ID, and each ID has its background-image. The structure looks like this:
$('.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
Does anyone know what I need to do to make it fun?