Как сделать простую галерею с миниатюрами?

Question

[v-orlov]

у меня неизбежно подключен jquery с кучей других библиотек, так что его использую в любом случае. дополнительно использовать стороннюю тяжеленную галерею с миниатюрами нет нужды, но и свой вариант не работает (в js я как собака, понимаю, а сказать не могу)

у меня два блока, в одном отображаются большие фотки, во втором блоке отдельно идут миниатюры.

<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>

стили такие :

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

то есть все большие фотки скрыты, пока на них не попадет класс active. но изначально при обновлении страницы этот класс стоит на первой фотке.
я подсмотрел один вариант, где автор в href миниатюр прописывал адрес большой картинки, и таким образом их связывал. но тот вариант мне не подходит.

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

то есть я забираю адрес из href нажатой миниатюры, и добавляю класс active фотке, у которой такой же src. при этому мне нужно снять с предыдущей фотки этот класс.
я понимаю, что тут бред в js, хотя бы потому, что это не работает и не описывают всю логику. подскажите как правильно это сделать на jquery (структуру html менять вообще никак нельзя) ?

Answer 1

[Кирилл Туровников]

Ему не нравится queryselector, сделайте иначе, вот пример как jsfiddle.net/straj/z03yk9bb/1

Comments

[v-orlov]

помогло, без проблем работает, спасибо Вам

Answer 2

[Андрей Гончаров]

я не уверен, но должно сработать так:

$(".images img[src =" + mainImage + "]").addClass('active');

а чтобы снять active с остальных img:
$(".images img").removeClass('active');

Answer 3

[v-orlov]

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

консоль ругается
как-то атрибуты неправильно прописаны. гуглил три часа, ничего не нашел