Добрый ночи, друзья.
Прошу прощения, если название заголовка сформулировано некорректно.
Подскажите, как решить следующую задачу.
У меня есть галерея с фильтрацией. Фильтр отлично работает, выводит на экран картинки согласно выбранной теме (по нажатию на кнопку навигации), однако при открытии картинки в модальном окне выводит картинку всего потока. То есть картинки фильтруются, а модальное окно работает только по всем картинкам.
Хочу решить эту проблему следующим способом.
Так как плагин срабатывает при наличие в ссылке <a data-lightbox="roadtrip">, то необходимо, чтобы при нажатии на кнопку фильтра (Theme1), в ссылке <a> добавлялся lightbox="roadtrip" при условии, что в у родителя есть класс (
Theme1) или (
Theme1 Theme2). Тогда в модульном окне будут в потоке необходимые картинки.
Структура:
<nav>
<ul id="filters">
<li><span class="filter active" data-filter="Theme1 Theme2 Theme3">Все темы</span></li>
<li><span class="filter" data-filter="Theme1">Тема 1</span></li>
<li><span class="filter" data-filter="Theme2">Тема 2</span></li>
<li><span class="filter" data-filter="Theme3">Тема 3</span></li>
</ul>
</nav>
<class="gallery">
<ul>
<li class="Theme1"><a href="img/content-full/1.jpg"><img src="img/content/1.jpg" alt=""></a></li>
<li class="Theme2"><a href="img/content-full/2.jpg"><img src="img/content/2.jpg" alt=""></a></li>
<li class="Theme1 Theme2"><a href="img/content-full/3.jpg"><img src="img/content/3.jpg" alt=""></a></li>
</ul>
<div>
Что должен сделать скрипт:
a) При нажатии на фильтр Тема 1
<ul id="filters">
<li><span class="filter active" data-filter="Theme1 Theme2 Theme3">Все темы</span></li>
<li><span class="filter" data-filter="Theme1">Тема 1</span></li>
<li><span class="filter" data-filter="Theme2">Тема 2</span></li>
<li><span class="filter" data-filter="Theme3">Тема 3</span></li>
</ul>
b) Добавить data-lightbox="roadtrip" в <a> при условии, что у родителя имеется class="Theme1"
до:
<ul>
<li class="Theme1"><a href="img/content-full/1.jpg"><img src="img/content/1.jpg" alt=""></a></li>
<li class="Theme2"><a href="img/content-full/2.jpg"><img src="img/content/2.jpg" alt=""></a></li>
<li class="Theme1 Theme2"><a href="img/content-full/3.jpg"><img src="img/content/3.jpg" alt=""></a></li>
</ul>
после скрипта:
<ul>
<li class="Theme1"><a href="img/content-full/1.jpg" data-lightbox="roadtrip"><img src="img/content/1.jpg" alt=""></a></li>
<li class="Theme2"><a href="img/content-full/2.jpg"><img src="img/content/2.jpg" alt=""></a></li>
<li class="Theme1 Theme2"><a href="img/content-full/3.jpg" data-lightbox="roadtrip"><img src="img/content/3.jpg" alt=""></a></li>
</ul>
Желательно, чтобы после нажатия другую кнопку фильтра (Тема 2, к примеру), сначала удалялись data-lightbox="roadtrip", во всех <a> списка с картинками, а затем выполнялось действие b)
до:
<ul>
<li class="Theme1"><a href="img/content-full/1.jpg" data-lightbox="roadtrip"><img src="img/content/1.jpg" alt=""></a></li>
<li class="Theme2"><a href="img/content-full/2.jpg"><img src="img/content/2.jpg" alt=""></a></li>
<li class="Theme1 Theme2"><a href="img/content-full/3.jpg" data-lightbox="roadtrip"><img src="img/content/3.jpg" alt=""></a></li>
</ul>
после
<ul>
<li class="Theme1"><a href="img/content-full/1.jpg"><img src="img/content/1.jpg" alt=""></a></li>
<li class="Theme2"><a href="img/content-full/2.jpg" data-lightbox="roadtrip"><img src="img/content/2.jpg" alt=""></a></li>
<li class="Theme1 Theme2"><a href="img/content-full/3.jpg" data-lightbox="roadtrip"><img src="img/content/3.jpg" alt=""></a></li>
</ul>
Задача нетрудная, но я еще плохо разбираюсь в JS и JQuery, надеюсь, мы вместе сможем решить эту задачу.
