2

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.

6
  • Se escreves-te url em vez de src errado corrige pf na pergunta... de onde vais buscar "ident<data:post.id/>"?
    – Sergio
    Commented 6/02/2015 às 13:31
  • Então, dentro do Blogger a tags próprias do sistema que retornam um id distinto para cada postagem... assim não há 2 postagens com um mesmo id. Dessa forma a primeira imagem também será diferente. Aqui há um exemplo de como o a tag gera um número <div class="postagens" id="ident696899985754861576">. Podem observar que "ident" continua o mesmo, mas o "<data:post.id/>" virá um código de números único.
    – Italo
    Commented 6/02/2015 às 13:37
  • Poderia pegar id por id, e para cada um, pegar a url de cada imagem e aplicar como background da sua div pai, em vez de usar estas tags do blogger? E como fazer?
    – Italo
    Commented 6/02/2015 às 13:42
  • Você está chamando a função pegaId dentro dela mesmo, por quê? Commented 6/02/2015 às 14:07
  • Não sei... eu já tentei de tudo... coloquei a chamada dentro dela mesmo porque era a única que durante as mudanças me retornava algo. Se coloco a chamada antes diz que a função 'pegaId' não está declarada, se coloco depois 'function(id)' não retorna nada... mudando o código de posição essa foi realmente a única que me retornou o 'id' no 'console'. Por isso deixei assim.
    – Italo
    Commented 6/02/2015 às 14:12

2 Respostas 2

1

supondo que cada div de uma postagem tenha a class "post":

$(function() {
    var urlsImagens = $(".post img:nth-child(1)").map(function() {
       return this.getAttribute("src");
    });
});

0
$(window).load(
    $(function pegaId(id){

            var imagemUrl = document.querySelector(".post-body img:nth-child(1)").src;
            console.log(imagemUrl);

            $("body").css("background-image", "url("+imagemUrl+")");

}));

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 .