Как добавить class="fancybox" к стандартной галерее WordPress?

Question

Как добавить class="fancybox" к стандартной галерее WordPress?

9 мар. 2012 г., 12:46:21

Просмотры: 26.4K

Голосов: 5

Я попробовал этот шорткод:

[gallery class="fancybox" link="file" columns="5"]

Но class="fancybox" не добавляется к тегу a href каждого изображения.

Как можно добавить class="fancybox" к каждому тегу a href?

PS: где находится исходный код галереи?

alex

1.11K

галерея

Комментарии

ок, я тестирую с add_filter('wp_get_attachment_link', но как мне убедиться, что это применяется только к шорткоду Gallery?

alex

9 мар. 2012 г. 13:03:23

Ок, я добавил это, но хочу убедиться, что это применяется только к шорткоду галереи, как это сделать? `function my_get_attachment_link($html) { $postid = get_the_ID(); $html = str_replace('<a', '<a class="fancybox"', $html); return $html; }

add_filter('wp_get_attachment_link', 'my_get_attachment_link', 10, 1);`

alex

9 мар. 2012 г. 13:17:40

Почему бы не изменить селектор javascript, на котором работает fancybox?

sanchothefat

9 мар. 2012 г. 14:08:05

@sanchothefat идет по правильному пути. Вы смотрите на проблему неверно. Вы увеличиваете нагрузку на обработку галереи без веской причины.

Dan

31 янв. 2013 г. 18:25:54

Все ответы на вопрос

Комментарии

jQuery работает в WordPress в режиме no-conflict. Я соответствующим образом изменил ваш код. О, и добро пожаловать на WordPress Stack Exchange!

fuxia

9 мар. 2012 г. 20:40:43

Просто убедитесь, что галерея настроена на ссылку к файлу, а не на страницу вложения. Меня это тоже сбило с толку!

kdev

23 авг. 2016 г. 13:37:18

jQuery(".gallery-icon a").fancybox().attr('data-fancybox', 'wp-gallery-fancybox');

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

Freek Bron

61

31 янв. 2013 г. 17:46:22

Эти ответы были правильными, но теперь fancybox изменил свои спецификации. Атрибут rel="gallery" больше не используется, вместо него используется "data-fancybox=gallery". Поэтому новые скрипты должны выглядеть так:

 jQuery(".gallery-icon a").fancybox().attr('data-fancybox', 'gallery');

и

jQuery('.gallery').each(function() {
            // устанавливаем rel для каждой галереи
            jQuery(this).find(".gallery-icon a").attr('data-fancybox', 'group-' + jQuery(this).attr('id'));
        });

Aslan French

235

24 окт. 2017 г. 22:19:13

продолжая мысль @kaiser -

Каждая галерея в идеале должна иметь уникальный идентификатор, но теперь, когда записи и страницы могут содержать несколько галерей, с помощью PHP не так просто присвоить каждой галерее уникальный атрибут rel.

jQuery('.gallery').each(function (g) {
    jQuery('a', this).attr('rel', function (i, attr) {
         return attr + ' gallery-' + g;
    });
});`

Будьте внимательны с селекторами, ваша тема может их переопределять. Подробнее об этом можно прочитать на http://kaspars.net/blog/wordpress/add-rel-attribute-to-each-gallery-post

orionrush

920

20 мар. 2015 г. 02:37:18

Esteban 391 · Accepted Answer · 2012-03-09T17:41:10Z

Вы можете использовать javascript/jquery для решения этой задачи.

Когда вы вставляете галерею в записи WordPress, вся галерея оборачивается в div с id типа "gallery-1", но также имеет класс "gallery". Кроме того, каждый элемент окружен двумя другими тегами "dl" и "dt" с классами "gallery-item" и "gallery-icon" соответственно.

Таким образом, вы можете просто использовать jQuery для выбора всех ссылок внутри этих классов и добавить любой скрипт лайтбокса, который вам нужен.

Если это fancybox, то что-то вроде этого должно сработать:

jQuery(".gallery-icon a").fancybox();

Можно быть более конкретным, указывая классы CSS .gallery .gallery-item .gallery-icon в таком порядке, а затем тег a (для ссылки).

Для новых галерей Gutenberg это должно работать:

jQuery(".wp-block-gallery .blocks-gallery-item a").fancybox();

Если вы хотите, чтобы пользователи могли перемещаться между изображениями как в галерее, используйте:

jQuery(".gallery-icon a").fancybox().attr('data-fancybox', 'gallery');

А для новых галерей Gutenberg используйте вместо этого:

jQuery(".wp-block-gallery .blocks-gallery-item a").fancybox().attr('data-fancybox', 'gallery');

Если вам нужен более детальный контроль (для нескольких галерей на одной странице), ознакомьтесь с этим ответом.

Или используйте простой плагин, который применяет тот же подход от Viper007Bond, который делает это чисто и аккуратно, но использует colorbox вместо fancybox.