Replace src field value with javascript

Asked

Viewed 69 times

1

I’m trying to modify a function in this virtual store click here.

On this product page, in the code html page, in the image gallery, there is the following code that refers to the main image:

<a class="thumbnail min-h" href=""><img class="main_image" src="https://roupasemvarejo.com.br/image/cache/catalog/Produtos/masculino/bermuda-tactel-masculina1-228x228.jpg" id="zoom_01" data-zoom-image="https://roupasemvarejo.com.br/image/cache/catalog/Produtos/masculino/bermuda-tactel-masculina1-500x500.jpg" title="Bermuda Tactel Masculina 100 Estampas" alt="Bermuda Tactel Masculina 100 Estampas"></a>

If you use Chrome and use the function to inspect the page, you will see that I click on the thumbnail of the other images, the field value data-zoom-image is changed, but the value of the src remains, so that the main image is not replaced. But when you hover the mouse over the main image, the zoom that appears refers to the thumbnail of the image that was clicked.

I would like help with a javascript function that changes the value in the field src.

I tried the function below, but it didn’t work:

$(document).ready(function() {
    $('.thumbnail').click(function(){
        $('#zoom_01').attr('src',large_image); //large_image é a variável que o campo data-zoom-image utiliza
    });
});
javascript jquery

1 answer

0


You are selecting the wrong element. If you want to select the image in:

<a class="thumbnail min-h" href=""><img class="main_image" src="https://roupasemvarejo.com.br/image/cache/catalog/Produtos/masculino/bermuda-tactel-masculina1-228x228.jpg" id="zoom_01" data-zoom-image="https://roupasemvarejo.com.br/image/cache/catalog/Produtos/masculino/bermuda-tactel-masculina1-500x500.jpg" title="Bermuda Tactel Masculina 100 Estampas" alt="Bermuda Tactel Masculina 100 Estampas"></a>

The image above is the thumbnail. You are mistakenly selecting the image that appears in the zoom, which is working normally.

The correct selector is this:

$("a.thumbnail .main_image")

Soon it would be:

$("a.thumbnail .main_image").attr("src",large_image);

  • Yes, the zoom image is correct, but when clicking another image in the thumbnails the main image is not updated, only the image in the field value data-zoom-image corresponding to the zoom.

  • @Wendell Didn’t work with the tip above?

  • worked, but I ended up having another problem: When clicking on the thumbnail the main image gets 500x500px ratio, as can be seen in the url when inspecting the page, this ratio is only for zoom, the correct ratio without zoom should be 228x228px. There’s a way to change that?

  • @Wendell Try this one: $('a.thumbnail .main_image').attr('src', $(this).find("img").attr("src"));

  • @Wendell I was looking at your website here, the problem is that there is no reference to this image size 228px.. only the 74px and 500px... if the image name is standardized and only changes the size value, you can replace this value

  • thanks for your help, I noticed this and I replaced it to change the size, but as you had seen the site is not generating the image in size 228px, I am looking for the error that is causing it.

  • @Wendell Creates an attribute in the type link data-img="url_da_imagem_228" that gets easy to pull

Show 2 more comments

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.