How to make a simple thumbnail gallery?

Question

JavaScript

I inevitably have jquery connected with a bunch of other libraries, so I use it anyway. there is no need to additionally use a third-party heavy gallery with thumbnails, but my own version doesn’t work either (in js I understand like a dog, but I can’t say)
I have two blocks, large photos are displayed in one, thumbnails go separately in the second block.

<div class="images">
  <img src="img/01.png" class="active"/>
  <img src="img/02.png" />
  <img src="img/03.png" />
  <img src="img/04.png" />
</div>
<div class="thumbs">
  <a href="img/01.png" class="show-image"><img src="img/thumb-sea.png"></a>
  <a href="img/02.png" class="show-image"><img src="img/thumb-bird.png"></a>
  <a href="img/03.png" class="show-image"><img src="img/thumb-galaxy.png"></a>
  <a href="img/04.png" class="show-image"><img src="img/thumb-sunset.png"></a>
</div>

styles are like this:

.images img {display: none}
.images .active {display: block}

that is, all large photos are hidden until they get the active class. but initially, when the page is updated, this class is on the first photo.
I spied on one option, where the author in the href of the thumbnails wrote the address of a large picture, and thus connected them. but that option doesn't work for me.

$(".show-image").click(function() {
event.preventDefault();
var mainImage = $(this).attr("href"); 
$(".images img[src = mainImage]").addClass('active'); 
});

that is, I take the address from the href of the clicked thumbnail, and add the active class to the photo that has the same src. at the same time, I need to remove this class from the previous photo.
I understand that this is nonsense in js, if only because it does not work and does not describe all the logic. tell me how to do it correctly on jquery (the html structure cannot be changed at all)?

Answer 1

He doesn't like queryselector, do otherwise, here is an example like jsfiddle.net/straj/z03yk9bb/1

Answer 2

I'm not sure, but it should work like this:
and to remove active from the rest of the img:
$(".images img").removeClass('active');

Answer 3

Uncaught Error: Syntax error, unrecognized expression: .img img[src =img/content/about-bg-04.jpg]

the console swears
somehow attributes are incorrectly registered. googled for three hours, found nothing