1

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?

1 Resposta 1

0

Você quer pegar o background-image do css. Faça isto:

$('.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>
<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>

2
  • ISSO!!! David, tem mais de 1 mês que eu to nessa busca e pesquisa pra resolver isso. Valeu mesmo!! Me passa onde tu aprendeu isso porfavor porque eu preciso aprender mais.
    – Thiago
    14/08/2017 às 13:22
  • Valeu! Cara, a gente aprende lendo e pesquisando na net. Um bom lugar onde vc pode aprende mts coisas é no site w3schools.com
    – Meu ovo
    14/08/2017 às 15:16

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 .