Change an image if link is clicked

1

Hello,

this is my piece of code :

{% set snipcart_image = page.media.images|first %}
{% set snipcart_images = page.media.images %}

<div id="snipcart-detail" class="block-group">

    {{ page.order|trim('.') }}

    <div class="snipcart-info block">
        <div class="snipcart-thumb">
            {% if snipcart_image %}
              {{ snipcart_image.cropResize(400,400).html(page.header.title,'snipcart-thumb-image')|raw }}
            {% endif %}
        </div>

        {% if snipcart_images %}
        <div class="snipcart-many">
          {% for item in snipcart_images %}
                <a href="" onclick="{% set snipcart_image = "{{ item }}" %}"> {{ item }} 
                </a>
          {% endfor %}
        </div>
        {% endif %}

        <p>
            <a href="#"
                class="button snipcart-add-item"
                data-item-id="{{ page.header.product_id }}"
                data-item-name="{{ page.header.title }}"
                data-item-price="{{ page.header.price }}"
                data-item-url="{{ page.url }}"
                {% spaceless %}
                {% if snipcart_image %}
                    data-item-image="{{ snipcart_image.cropResize(50,50).url }}"
                {% endif %}
                {% endspaceless %}
                
            >
                <i class="fa fa-shopping-cart"></i> Add to Cart
            </a>
        </p>
    </div>


    <div class="snipcart-details block">
        <h1>{{ page.header.title }}</h1>

        <p>{{ page.content|raw }}</p>

    </div>
</div>

Look at <a href="" onclick="{% set snipcart_image = "{{ item }}" %}"> {{ item }}
I’m trying to do something like that :

I have a main image with secondaries images on the left, and when I click on a secondary image, it reload the page in order to change the image (with the secondary one).

Any idea ?