Tenho um blog, e para cada postagem é criada automaticamente uma div. Na página inicial deve ser exibida apenas a primeira imagem do post e o título (com link) referente a postagem. Só que aqui, gostaria que a imagem ficasse definida como background-image
de sua div pai.
Para isso, uso a uma tag do blogger que retorna o id único para aquela postagem, gerado pelo próprio blogger.
Com o id da div, utilizo o seletor :first-child
para pegar a primeira imagem, e sucessivamente o url dela, armazenando em uma variável, para depois utilizar na definição do css background-image
. Assim como mostra no código:
$(window).load(
$(function pegaId(id){
var idDoPost = $("#"+id).attr("id");
console.log(idDoPost);
var imagemUrl = document.querySelector("#" + idDoPost + " img").src;
console.log(imagemUrl);
$(".post-outer").css("background-image", "url("+imagemUrl+")");
pegaId("ident<data:post.id/>"); /*chama a função pegaId e passa como parametro o id
que será utilizado para identificar a div*/
}));
O problema é que já mudei o código várias vezes, usei outros seletores, acrescentei mais funções, mudei o código de posição na página e nada.
Pesquiso por soluções mas também não encontro.
No console diz que o url das imagens estão "undefined", acho que é porque as imagens só são carregadas depois, mesmo utilizando o $(document).ready()
ou $(window).load()
.
Queria que alguém me ajudasse, pois quero fazer um código que pegue essas imagens automaticamente.
url
em vez desrc
errado corrige pf na pergunta... de onde vais buscar"ident<data:post.id/>"
?