2

Eu preciso de um script que modifique o atributo src de várias imagens.

A ideia é substituir alguns trechos da URL apenas, mas o problema é que vão ser várias imagens com a mesma classe.

Vai ser um gerador de tbumbnail. A imagem original vai vir com uma dimensão e eu quero mudar através da URL, por exemplo:

redir.com?url=imgs.com/img3356/100x150/img.jpg

para

imgs.com/img3356/300x500/img.jpg

O script deve rodar antes da página carregar, porque o endereço original vai ser uma página que faz a mesma função usando PHP, mas eu só quero que ela rode se o script não funcionar.

O que já tentei:

$(document).ready(function() {
    $("img.miniatura").each(function() {
        var url_img = $(this).attr("src");
        var nova_url = url_img.replace("s72-c", "s150-c100");
        $(this).attr("src", nova_url);
        document.write(nova_url);
    });
});

É algo assim que eu estava precisando, só que, no caso, cada URL é bem diferente. A única coisa em comum é a parte das dimensões da imagem. e eu preciso trocar mais de um trecho. Eu fiz um teste com esse script ai mas, como eu falei, ainda não funciona exatamente como eu preciso. Não entendo muito bem do que você fez na variável regex ai, mas, pelo que pude notar, depende de a URL mudar só aquele trecho, o que não é o caso.

7
  • Tenho a impressão que mesmo que alguma resposta dê certo, o caminho escolhido para resolver o problema seja longe do ideal. Claro que sem mais detalhes, é só um palpite.
    – Largato
    Commented 4/04/2015 às 15:00
  • E qual caminho você me indicaria ?
    – Carlos
    Commented 4/04/2015 às 15:01
  • Como não sei os detalhes, é meio complicado. O que você quer dizer com "se o script não funcionar"? Se é pra galeria de fotos ou lightbox, melhor seria já gerar com os URLs das miniaturas, e linkar para as grandes, não? (considerando que você usa PHP)
    – Largato
    Commented 4/04/2015 às 15:02
  • Vou explicar melhor: a página vai ter várias imagens com tamanhos definido. Mas eu quero mudar esses tamanhos. Mudando a url, muda o tamanho da imagem. Ai eu fiz um esquema em php para fazer isso para mim. então a url da imagem vem como um parametro do endereço da página php que eu usei para fazer isso. Mas eu não quero usar o php sem necessidade, então quero um script que faça isso. Mas caso o javascript esteja desabilitado no navegador, é bom ter a solução em php. Eu não para gerar já com as urls das miniaturas porque eu estou usando a plataforma blogger, não aceita php.
    – Carlos
    Commented 4/04/2015 às 15:06
  • É relativamente simples trocar as URLS por JS, mas vai ser sempre um remendo. Mas se é a única solução possível, vamos aguardar alguma resposta então.
    – Largato
    Commented 4/04/2015 às 15:12

2 Respostas 2

3

Se entendi bem, você quer substituir o caminho atual da imagem por um novo caminho, sendo que tal caminho especifica um tamanho diferente? Fiz de uma maneira aqui para substituir o caminho, você pode tentar adaptar para chegar a conclusão.

Note que eu estou utilizando uma URL diferente da que você especificou, mas a solução pode ser adaptada como eu já disse, irei lhe mostrar como. Minha imagem é essa:

<img src="http://www.rafaelalmeida.net78.net/exemplos/sopt/56952-src-img/100x150.png" class="thumb"/>

Perceba que é no nome da imagem que o tamanho é especificado, sendo "300x340.png" a imagem com outro tamanho. Pois bem, vamos lá.

Código

Primeiro precisamos percorrer todos os elementos que tenham a classe "thumb", após isso, pegar o seu valor atual que está no atributo "src", logo:

$("img.thumb").each(function() {
    // Pega o caminho atual
    var img_path = $(this).attr("src");
});

Achei adequado usar regex para resolver o problema, então fiz um que pega o tamanho da imagem:

var regex = /rafaelalmeida.net78.net\/exemplos\/sopt\/56952-src-img\/(.+).png/;

Perceba que o que está está entre os parênteses é o valor a ser pego, logo, no seu caso ficaria assim:

var regex = /redir.com\?url=imgs.com\/img3356\/(.+)\/img.jpg/;

Com o regex em mãos, testamos se a imagem realmente atende aos requisitos, se sim, pegamos o valor que o regex nos retorna e verificamos se é o valor que quer trocar (no seu caso "100x1500":

if (regex.test(img_path)) {
    // Se o caminho da imagem bater com o regex...
    // Especifica o tamanho atual
    var size = img_path.match(regex)[1];
    if (size == "100x150") {
        // Se o tamanho for 100x150...
    }
}

Agora é simples, substituímos a string que tinha o antigo valor para o novo utilizando o mesmo regex e finalmente mudamos o valor de src para o novo caminho:

// Substitui o antigo caminho com o novo tamanho
var new_path = img_path.replace(size, "300x340");
// Atribui o novo valor ao atributo "src"
$(this).attr("src", new_path);

Código final

Com isso temos nosso código final:

$(document).ready(function() {
    // Percore todas as imagens com a classe "thumb"
    $("img.thumb").each(function() {
        // Pega o caminho atual
        var img_path = $(this).attr("src");
        // Define o regex
        var regex = /rafaelalmeida.net78.net\/exemplos\/sopt\/56952-src-img\/(.+).png/;
        if (regex.test(img_path)) {
            // Se o caminho da imagem bater com o regex...
            // Especifica o tamanho atual
            var size = img_path.match(regex)[1];
            if (size == "100x150") {
                // Se o tamanho for 100x150...
                // Substitui o antigo caminho com o novo tamanho
                var new_path = img_path.replace(size, "300x340");
                // Atribui o novo valor ao atributo "src"
                $(this).attr("src", new_path);
            }
        }
    });
});

Fiddle: http://jsfiddle.net/cmt60bqe/

Eu usei dois endereços diferentes para as imagens, um com o www e outro sem, para ver que o regex funciona com ambos.

1

Se tudo o que precisas fazer é trocar 100x150 por 300x500:

$(document).ready(function() {
    $("img.miniatura").each(function() {
        $(this).attr("src", $(this).attr("src").replace("/100x150/", "/300x500/"));
    });
});

Exemplo

Para efeitos de demonstração, vamos usar linhas de texto ao invés do atributo src, trocando assim o HTML para vermos a diferença entre o código fonte e o que é apresentado na página:

$(document).ready(function() {
  // simulação em texto para vermos fácilmente
  $("p.miniatura").each(function() {
    $(this).html($(this).html().replace("/100x150/", "/300x500/"));
  });

  // troca como pretendido na SRC
  $("img.miniatura").each(function() {
    $(this).attr("src", $(this).attr("src").replace("/100x150/", "/300x500/"));
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<p class="miniatura">redir.com?url=imgs.com/img3356/100x150/img1.jpg</p>
<p class="miniatura">redir.com?url=imgs.com/img3356/100x150/img2.jpg</p>
<p class="miniatura">redir.com?url=imgs.com/img3356/100x150/img3.jpg</p>
<p class="miniatura">redir.com?url=imgs.com/img3356/100x150/img4.jpg</p>

<img class="miniatura" src="redir.com?url=imgs.com/img3356/100x150/img1.jpg" />
<img class="miniatura" src="redir.com?url=imgs.com/img3356/100x150/img2.jpg" />
<img class="miniatura" src="redir.com?url=imgs.com/img3356/100x150/img3.jpg" />
<img class="miniatura" src="redir.com?url=imgs.com/img3356/100x150/img4.jpg" />

1
  • Obrigado ! Eu queria trocar dois trechos, mas ai é só adaptar. A solução do Rafael Almeida também é boa, mas é um pouco complicada. Upvote para as duas.
    – Carlos
    Commented 6/04/2015 às 17:07

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 .