Как использовать WordPress Thickbox для создания галереи изображений

В WordPress по-умолчанию встроена библиотека Javascript, которая позволяет вам легко выводить всплывающие диалоговые окна на вашем сайте WordPress. Эта библиотека Javascript называется Thickbox, при этом является легковесной библиотекой, используемой для создания диалоговых виджетов на основе библиотеки jQuery.

Библиотека Thickbox может быть использована для вывода картинки, нескольких изображений, inline контента, контента в iframe и даже контента из iframe.

Thickbox

Используя библиотеку Thickbox вы можете легко превратить ваши изображения в записи WordPress в pop-up галерею.

Как использовать Thickbox

Для того, чтобы использовать Thickbox на вашем WordPress сайте, вам нужно включить (заинклудить) файлы Javascript и CSS на страницу. В виду того, что это один из дефолтных скриптов, который поставляется вместе с WordPress, вы можете просто вызвать хендл для Thickbox и он добавит файлы Javascript на страницу.

В действии wp_enqueue_scripts нужно вызывать функции wp_enqueue_script с хендлом thickbox и зависимостями jQuery, так как они уже зарегистрированы в WordPress и нам не нужно указывать источник для скрипта.

Следующей функцией нужно добавить стили Thickbox на страницу путем использования wp_enqueue_style, библиотека Thickbox расположена в папке wp-includes внутри папки js — /wp-includes/js/thickbox.

function include_thickbox_scripts()
{
    // инклудим javascript
    wp_enqueue_script('thickbox', null, array('jquery'));

    // инклудим стили thickbox
    wp_enqueue_style('thickbox.css', '/'.WPINC.'/js/thickbox/thickbox.css', null, '1.0');
}
add_action('wp_enqueue_scripts', 'include_thickbox_scripts');

Подключаем картинки для работы с Thickbox

Со стилями Thickbox и файлами Javascript, включенными на странице, мы можем добавлять изображения в запись и при этом добавлять необходимые классы HTML для работы изображений с Thickbox.

Для того, чтобы использовать Thickbox, вам необходимо добавить ссылку вокруг изображения с HTML классом Thickbox’а.

<a href="images/image1.jpg" title="Image 1" class="thickbox"><img src="images/image1_thumbnail.jpg" alt="Image 1" /></a>

Это активирует Thickbox для изображения, и теперь при событии клика на картинке диалоговое окно Thickbox всплывет с картинкой, обернутой в href, и выведется во всплывающем окне.

Создаем Thickbox галерею

Можно использовать Thickbox для создания галереи изображений, что позволит переключаться между несколькими картинками. Для того, чтобы создать галерею, вам нужно просто добавить к ссылке атрибут rel=»» attribute.

<a href="images/image1.jpg" title="Image 1" class="thickbox" rel="gallery"><img src="images/image1_thumbnail.jpg" alt="Image 1" /></a>
<a href="images/image2.jpg" title="Image 2" class="thickbox" rel="gallery"><img src="images/image2_thumbnail.jpg" alt="Image 2" /></a>
<a href="images/image3.jpg" title="Image 3" class="thickbox" rel="gallery"><img src="images/image3_thumbnail.jpg" alt="Image 3" /></a>

Автоматически добавляем класс Thickbox ко всем изображениям

Если же вы хотите использовать Thickbox для каждого изображения на вашем WordPress сайте, вокруг которого есть ссылка, то достаточно применить the_content filter для поиска изображений картинок, обернутых в ссылку, а затем добавить класс к этой ссылке.

Этот способ использует регулярные выражения для поисках всех картинок со ссылками и заменяет HTML на ссылку и HTML класс thickbox.

function auto_add_thickbox($content)
{
    $content = preg_replace('/<a(.*?)href="(.*?).(jpg|jpeg|png|gif|bmp|ico)"(.*?)><img/U', '<a$1href="$2.$3" $4 class="thickbox"><img', $content);

    return $content;
}
add_filter('the_content', 'auto_add_thickbox', 2)

Добавляем класс с помощью jQuery

Альтернативной добавления thickbox HTML вокруг всех ссылок с помощью фильтра WordPress, может стать jQuery, который также будет искать все изображения на странице и добавлять к ним класс thickbox’а.

jQuery(document).ready(function() {
    jQuery("img").parent("a").addClass("thickbox");
});

Вот и все. Надеемся, что эта статья помогла вам использовать Thickbox для создания галереи изображений в WordPress.

По всем вопросам и отзывам просьба писать в комментарии ниже.

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