Подключаем и используем jquery компонент для создания на сайте лайтбокса — jquery.fancybox. Альтернатива плагину easyFancybox.
Скачать можно здесь.
Базовый функционал Fancybox
Подключаем скрипты и стили
function addsitefancybox() { wp_enqueue_style( 'sitefancybox', plugins_url('/jquery.fancybox.css', __FILE__) ); wp_enqueue_script( 'sitefancybox', plugins_url('/jquery.fancybox.pack.js', __FILE__), array('jquery'), null, true ); wp_enqueue_script( 'sitefancybox-mousewheel', plugins_url('/jquery.mousewheel-3.0.6.pack.js', __FILE__), array('jquery'), null, true ); } add_action( 'get_footer', 'addsitefancybox' );
jquery.mousewheel — скрипт прокрутки изображений колесом мыши, не обязателен
В Woocommerce есть свой неплохой лайтбокс, чтобы эти два лайтбокса не пересекались и не загружались одновременно, функции вызова скриптов и стилей можно обернуть условием if ( !is_product() ) { wp_enqueue… }
Инициализируем fancybox при загрузке страницы
$("a[href$='.jpg'],a[href$='.jpeg'],a[href$='.png'],a[href$='.gif']").attr('rel', 'gallery').addClass('fancybox').fancybox(); $(document).ready(function() { $('.fancybox').fancybox({ padding : 0, openEffect : 'elastic', closeBtn: false }); });
Первый кусок кода находит все ссылки на изображения и задает им класс .fancybox, а также объединяет их в галерею.
Второй кусок инициализирует сам fancybox и задает его настройки, о них ниже.
Скачок при нажатии
Есть следующая проблема: при нажатии на ссылку fancybox лайтбокс работает нормально, но мы перескакиваем в начало страницы. Происходит это из-за свойсва height: 100%; в селекторе html/body.
Дополнительные компоненты fancybox (миниатюры, элементы управления)
Можно расширить функционал fancybox, добавив миниатюры изображений, автоматическую прокрутки, кнопки управления, расширение до оригинального размера и т.д.
Настройки fancybox
padding : 0 отступ белого поля от изображения (по-умолчанию 15px)
margin : 20 отступ до границ экрана (по-умолчанию 20px)
openEffect / closeEffect / nextEffect / prevEffect : ‘elastic’ эффект при открытии изображения (‘elastic’, ‘fade’ или ‘none’) (по-умолчанию fade)
closeBtn: false скрыть кнопку закрытия (по-умолчанию true)
Подключаем fancybox локально
Чтобы не вызывать скрипты и стили fancybox там где они не нужны, устанавливаем проверку (is_singular() — страницы и записи любых типов):
function addsitefancybox() { if ( is_singular() ) { wp_enqueue_style( 'sitefancybox', plugins_url('/jquery.fancybox.css', __FILE__) ); wp_enqueue_script( 'sitefancybox', plugins_url('/jquery.fancybox.pack.js', __FILE__), array('jquery'), null, true ); wp_enqueue_script( 'sitefancybox-mousewheel', plugins_url('/jquery.mousewheel-3.0.6.pack.js', __FILE__), array('jquery'), null, true ); wp_enqueue_script( 'sitefancybox-init', plugins_url('/site-fancybox.js', __FILE__), array('jquery'), null, true ); } } add_action( 'wp_footer', 'addsitefancybox' );
Подключаем TouchSwipe
TouchSwipe-Jquery-Plugin добавляет fancybox возможность Touch перелистывания в мобильной версии.
Надо немного дополнить вызов fancybox
$(document).ready(function() { $('.fancybox').fancybox({ width: "100%", margin: [0, 0, 0, 0], padding: [0, 0, 0, 0], openEffect : 'none', closeEffect : 'none', prevEffect : 'fade', nextEffect : 'fade', closeBtn : false, arrows: false, helpers : { title : null, overlay : { css : { 'background' : 'rgba(0, 0, 0, 0.95)' } }, buttons : { } }, afterShow: function() { $('.fancybox-wrap').swipe({ swipe : function(event, direction) { if (direction === 'left' || direction === 'up') { $.fancybox.prev( direction ); } else { $.fancybox.next( direction ); } } }); }, afterLoad : function() { } }); });
Добавляем описание к изображениям
Добавляем к ссылке на изображение атрибут data-caption, пример:
<a href="/wp-content/uploads/2018/01/1093324.jpg" data-caption="This is the caption"><img src="/wp-content/uploads/2018/01/1093324-300x225.jpg" alt="" width="300" height="225"/></a>
В скрипт инициализации fabcybox добавляем параметр:
jQuery(document).ready(function() { jQuery('.fancybox').fancybox({ padding : 0, openEffect : 'elastic', closeEffect : 'elastic', closeBtn: false, beforeShow : function(){ this.title = jQuery(this.element).data('caption'); } }); });
Сделать так чтобы caption автоматически вставлялся в атрибут data-caption, а не в виде квадратных скобок