Modify the src of several images individually

Navigation
2

I need a script that modifies the src attribute of multiple images.

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

It will be a tbumbnail generator. The original image will come with a dimension and I want to change it 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 the 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 in> does 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 that I needed, but in this case, every URL is very different. The only thing in common is the part of the dimensions of the image. and I need to trade more than one stretch. I did a test with this script there but, as I said, it still does not work exactly as I need it. I do not quite understand what you did in the regex variable, but from what I could tell it depends on the URL changing only that snippet, which is not the case.

    
asked by anonymous 04.04.2015 / 16:58

2 answers

1

If all you have to do is change 100x150 to 300x500 : 

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

Example

For demonstration purposes, we will use lines of text instead of the src attribute, thus changing the HTML to see the difference between the source code and what is displayed 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><pclass="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" />
    
04.04.2015 / 23:55
3

If I understand correctly, you want to replace the current path of the image with a new path, and does that path specify a different size? I did a way here to override the path, you can try to adapt to reach completion.

Note that I am using a different URL from the one you specified, but the solution can be adapted as I already 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"/>

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

Code

First we need to go through all elements that have the class "thumb", after that, get their current value that is in the "src" attribute, then: 

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

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

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

Notice that what is in the parentheses is the value to be taken, so in your case it would look like this: 

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

With the regex in hand, we test whether the image actually meets the requirements, if so, we get the value that the regex returns us and check if it is the value you want to change (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 replaced the string that had the old value with the new one using the same regex and finally changed 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 this 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: link

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

    
04.04.2015 / 21:15
Required ErrorMessage dynamic content getJSON does not work