how to set a background-image in the src of an img tag using jquery?

Question

how to set a background-image in the src of an img tag using jquery?

Navigation

#1 by (0 votes)

1

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?

jquery html5 css3

asked by anonymous 14.08.2017 / 02:24

1 answer

Error with icon, vibration and sound in notification Is it possible to do assignment with shorter object initializer?

score 0 · Accepted Answer

You want to get the background-image of css. Do this:

$('.img').click(function(){
    var imagem = $(this)
	.css('background-image')
	.replace("url(","")
	.replace(")","")
	.replace(/"/g, "");
    var modal = '<div id="modal"><img src="'+ imagem + '" class="modalImagem"><div id="btFecha">X</div></div>';

$('body').append(modal);

})

#i1 {
  background-image: url(http://cinebsb.tempsite.ws/i/poster/fil_201772314241.jpg);
}
#w1 {
  background-image: url(http://cinebsb.tempsite.ws/i/poster/fil_20177271029.jpg);
}
#d1 {
    background-image: url(http://cinebsb.tempsite.ws/i/poster/fil_20177221461.jpg);
}

li img{display:block;width:100px;height:50px;}

#modal{
	display: block; width: 100px; height: 200px; position: absolute; border: 1px solid #ddd;top:0; right: 180px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="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>