Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.03.2017, 02:11
Новичок на форуме
Отправить личное сообщение для askECMA Посмотреть профиль Найти все сообщения от askECMA
 
Регистрация: 12.03.2017
Сообщений: 5

Добавить 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, 12.03.2017 в 12:54.
Ответить с цитированием
  #2 (permalink)  
Старый 12.03.2017, 02:59
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

askECMA,
может в фильтр и добавить изменение data-lightbox
Ответить с цитированием
  #3 (permalink)  
Старый 12.03.2017, 11:57
Новичок на форуме
Отправить личное сообщение для askECMA Посмотреть профиль Найти все сообщения от askECMA
 
Регистрация: 12.03.2017
Сообщений: 5

Как это реализовать?
Ответить с цитированием
  #4 (permalink)  
Старый 12.03.2017, 12:06
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

askECMA,
а как устроен ваш фильтр?
Ответить с цитированием
  #5 (permalink)  
Старый 12.03.2017, 12:31
Новичок на форуме
Отправить личное сообщение для askECMA Посмотреть профиль Найти все сообщения от askECMA
 
Регистрация: 12.03.2017
Сообщений: 5

Плагин Mixitup, по-моему он только фильтрует картинки.
Мне нужно навесить data-lightbox, чтобы совместить второй плагин
Ответить с цитированием
  #6 (permalink)  
Старый 12.03.2017, 15:22
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Mixitup и атрибут для lightbox
askECMA,
добавить в Mixitup
,
  callbacks: {
    onMixEnd: function(state){
      $(state.$hide).find("a").removeAttr("data-lightbox");
      $(state.$show).find("a").attr("data-lightbox" , "roadtrip");
    }
  }

Последний раз редактировалось рони, 12.03.2017 в 15:24.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Добавить / удалить класс кликом fabrique Общие вопросы Javascript 4 03.09.2014 04:43
Как найти нужный элемент страницы и кликнуть если он имеет тока класс... Александр_1997 Events/DOM/Window 3 18.01.2014 14:34
вопрос по видимости переменных. yiooxir Angular.js 3 31.10.2013 12:37
Не работает AJAX если есть перевод строки pashin76 AJAX и COMET 17 02.10.2013 13:36
Как добавить класс, если он переменная? j.r.r jQuery 2 30.08.2013 23:52