Change image without page refresh or reload

I have main image and 4 select options to select other . Those thumbnail images are just numbers 1,2,3,4 to represent theese images.

I wanted to ask if there is possible to change main image after clicks on those thumbnails 1,2,3, and 4 but without page refresh ?

solution:

I though about loading all 4 images in view, but show just first one. All others are hidden. Then just use onclick function to hide first image and display third one. Like in Javascript.

But that will increase page loading time. So if there is other option to do that ?

View:

<div class="pull-left" id="gallery">
        <div class="block-2-image">
            <a href=<%=@advertisement.pictures.first.image.url(:original)%> data-lightbox="gallery"><%=  image_tag @advertisement.pictures.first.image.url(:medium),
                              :title=> @advertisement.name,:id=>"main-image", :alt =>                                   @advertisement.name%></a>
        </div>

        <ul class="thumbnail">
             <li><%= image_tag("1.png")%></li>
             <li><%= image_tag("2.png")%></li>
             <li><%= image_tag("3.png")%></li>
             <li><%= image_tag("4.png")%></li>
        </ul>
</div><!-- End gallery -->

Maybe just change image path when click to those number images happen?

Any help ?

Thanks.