Modify src of multiple images individually

Question

I need a script which modifies the attribute src of various images.

The idea is to replace some snippets of the URL only, but the problem is that there will be several images with the same class.

It will be a tbumbnail generator. The original image will come with a dimension and I want to change through the URL, for example:

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

for

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

The script should run before page load, because the original address will be a page that does the same function using PHP, but I just want it to run if the script not work.

What I’ve already tried:

$(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);
    });
});

It’s something like this that I was needing, only in this case, every URL is quite different. The only thing in common is the image dimension part. and I need to exchange more than one excerpt. I did a test with this script But, as I said, it still doesn’t work exactly as I need it. I don’t understand very well what you did in the variable regex ai, but, as I noticed, it depends on the URL changing only that section, which is not the case.

Answer 1

If I understand correctly, do you want to replace the current image path with a new path, and such a path specifies a different size? I made a way here to replace the path, you can try to adapt to reach the conclusion.

Note that I am using a URL other than the one you specified, but the solution can be adapted as I said, I will show you how. My image is this:

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

Note that it is in the name of the image that the size is specified, being "300x340.png" the image with another size. Well, come on.

Code

First we need to go through all the elements that have the class "Thumb", after that, take its current value that is in the attribute "src", so:

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

I thought it appropriate to use regex to solve the problem, so I made one that takes the image size:

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

Note that what is between the parentheses is the value to be caught, so in your case it would look like this:

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

With regex in hand, we test if the image really meets the requirements, if yes, we take the value that regex returns and we check if it is the value you want to exchange (in your case "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...
    }
}

Now it’s simple, we replace the string that had the old value for the new using the same regex and finally change the value of src to the new path:

// 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);

---

Final code

With that we have our final code:

$(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/

I used two different addresses for the images, one with www and one without, to see that regex works with both.

Answer 2

If all you need to do is trade 100x150 for 300x500:

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

Example

For demonstration purposes, let’s use text lines instead of the attribute src, thus changing the HTML to see the difference between the source code and what is shown on the page:

$(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" />