Добавить data-lightbox="roadtrip" в <a>, если у родителя есть контр. класс
 

Добрый ночи, друзья.
Прошу прощения, если название заголовка сформулировано некорректно.
Подскажите, как решить следующую задачу.

У меня есть галерея с фильтрацией. Фильтр отлично работает, выводит на экран картинки согласно выбранной теме (по нажатию на кнопку навигации), однако при открытии картинки в модальном окне выводит картинку всего потока. То есть картинки фильтруются, а модальное окно работает только по всем картинкам.

Хочу решить эту проблему следующим способом.
Так как плагин срабатывает при наличие в ссылке <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, надеюсь, мы вместе сможем решить эту задачу. :)

askECMA,
может в фильтр и добавить изменение data-lightbox

Как это реализовать?

askECMA,
а как устроен ваш фильтр?

Плагин Mixitup, по-моему он только фильтрует картинки.
Мне нужно навесить data-lightbox, чтобы совместить второй плагин

Mixitup и атрибут для lightbox
 

askECMA,
добавить в Mixitup

,
  callbacks: {
    onMixEnd: function(state){
      $(state.$hide).find("a").removeAttr("data-lightbox");
      $(state.$show).find("a").attr("data-lightbox" , "roadtrip");
    }
  }