@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 менять вообще никак нельзя) ?
  • Вопрос задан
  • 3790 просмотров
Решения вопроса 1
Ему не нравится queryselector, сделайте иначе, вот пример как jsfiddle.net/straj/z03yk9bb/1
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
agmegadeth
@agmegadeth
Веб-разработчик в дизайн студии
я не уверен, но должно сработать так:
$(".images img[src =" + mainImage + "]").addClass('active');

а чтобы снять active с остальных img:
$(".images img").removeClass('active');
Ответ написан
Комментировать
@v-orlov Автор вопроса
Uncaught Error: Syntax error, unrecognized expression: .img img[src =img/content/about-bg-04.jpg]

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы