Как добавить класс к миниатюре Fancybox?

S
На сайте с 24.08.2015
Offline
82
330

Приветствую! Столкнулся с задачей и никак не могу найти решение. Есть галерея Fancybox с миниатюрами (thumbs). В галерее есть изображения и одно видео (видео есть не во всех галереях, но если есть, то оно всегда одно). Задача - присвоить класс миниатюре, если она является миниатюрой для видео, остальные миниатюры при этом остаются без изменений. 

Код:

<div class="fancybox-thumbs__list">
    <a href="javascript:;" tabindex="0" data-index="0" style="background-image:url(/001.jpg)" class="fancybox-thumbs-active"></a>
    <a href="javascript:;" tabindex="0" data-index="1" style="background-image:url(/002.jpg)"></a>
    <a href="javascript:;" tabindex="0" data-index="2" style="background-image:url(/003.jpg)"></a>
    <a href="javascript:;" tabindex="0" data-index="3" style="background-image:url(/004.jpg)"></a>
    <a href="javascript:;" tabindex="0" data-index="4" style="background-image:url(/005.jpg)"></a>
    <a href="javascript:;" tabindex="0" data-index="5" style="background-image:url(/006.jpg)"></a>
</div>
Возможно, кто-то сталкивался, или знает как сделать. FancyBox v3.5.7.


W1
На сайте с 22.01.2021
Offline
306
#1
samdo :
Задача - присвоить класс миниатюре, если она является миниатюрой для видео

Ну эти миниатюры ведь откуда-то берутся, они ведут к соответствующим ресурсам. Поэтому просто надо присвоить соответствующий класс, если миниатюра относится к видео. К фэнсибоксу это вообще не имеет отношения, это формирование списка с учётом типа ресурса.

Мой форум - https://webinfo.guru –Там я всегда на связи
E
На сайте с 10.02.2024
Offline
10
#2

Проще на стороне сервера разметить сразу.

На клиенте проверяйте, что содержит href с помощью indexOf.

S
На сайте с 24.08.2015
Offline
82
#3
webinfo #:

Ну эти миниатюры ведь откуда-то берутся, они ведут к соответствующим ресурсам. Поэтому просто надо присвоить соответствующий класс, если миниатюра относится к видео. К фэнсибоксу это вообще не имеет отношения, это формирование списка с учётом типа ресурса.

Всё это логично, но как это сделать. Fancybox в данном случае работает штатно, как у всех.
L
На сайте с 14.12.2008
Offline
128
#4
samdo #:
Всё это логично, но как это сделать. Fancybox в данном случае работает штатно, как у всех.

ты же генерируешь где то html код (с помощью php или что еще), который потом выводится и подхватывается фэнсибоксом

вот при генерации и добавляй класс к нужной миниатюре с видео

M
На сайте с 17.06.2021
Offline
78
#5
Leema #:

ты же генерируешь где то html код (с помощью php или что еще), который потом выводится и подхватывается фэнсибоксом

вот при генерации и добавляй класс к нужной миниатюре с видео

лол кек, при генерации идут одинаковые <a> теги, добавишь один класс и он будет везде а не только у видео

тс... фиг знает, через js как-то отслеживать что находится здесь  style="background-image:url(/006.jpg) и добавлять класс, если формат .mp4 условно 
у гпт спросил... ну надо тестить гуглить и так далее

document.addEventListener("DOMContentLoaded", function () {
    const links = document.querySelectorAll('a');

    links.forEach(link => {
        const style = link.getAttribute('style');
        if (style && style.includes('.mp4')) {
            link.classList.add('govno');
        }
    });
});


пс: через html css не припомню чтобы формат можно было мониторить, поэтому только так

Bybit крипто биржа https://partner.bybit.com/b/58507 /// Зарубежные VPS с оплатой РФ картами https://aeza.net/?ref=416422 (+15% к пополнению) //// Обучаем нейронки на сайте https://f4ck41.fun/
L
На сайте с 14.12.2008
Offline
128
#6
makepuff #:
лол кек, при генерации идут одинаковые <a> теги, добавишь один класс и он будет везде а не только у видео
makepuff #:
через js как-то отслеживать

действительно, ведь при генерации я не могу это отследить🤣

ТС, не слушай его

W1
На сайте с 22.01.2021
Offline
306
#7
makepuff #:
лол кек, при генерации идут одинаковые <a> теги, добавишь один класс и он будет везде а не только у видео

Лол кек, а условие, чтобы класс добавлялся только для видео, не сможешь вписать в код?

M
На сайте с 17.06.2021
Offline
78
#8
webinfo #:

Лол кек, а условие, чтобы класс добавлялся только для видео, не сможешь вписать в код?

чо за пассивная на форуме хаахаха

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий