Replace src field value with javascript

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

In this product page, in the code html of the page, in the image gallery, there is the following code that is referring 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 value of the data-zoom-image field is changed, however the value of the src field remains, the main picture is not replaced. But when you hover 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 would change the value in the src field.

I tried the function below, but it did not 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
    });
});