Fancybox без плагина

Подключаем и используем 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' );

Инициализируем 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, добавив миниатюры изображений, автоматическую прокрутки, кнопки управления, расширение до оригинального размера и т.д.

Также может происходить скачок при включении лайтбокса из-за того что скрывается полоса прокрутки. Избавиться от этого эффекта можно прописав стиль:

body.compensate-for-scrollbar {overflow-y: scroll !important; overflow-x: hidden !important;}

Либо просто убрать у body width: 100%;

Настройки fancybox

• padding : 0 отступ белого поля от изображения (по-умолчанию 15px)
• margin : 20 отступ до границ экрана (по-умолчанию 20px)
• openEffect / closeEffect / nextEffect / prevEffect : ‘elastic’ эффект при открытии изображения (‘elastic’, ‘fade’ или ‘none’) (по-умолчанию fade)
• closeBtn: false скрыть кнопку закрытия (по-умолчанию true)
• loop: 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');
  	    }
        });
	
});

Fancybox v.3

Недавно попробовал третью версию fancybox. Рекомендую использовать ее. Эта версия содержит все современные функции, работает плавно, без ошибок.

Для работы нужны только минифицированные основной скрипт и стили.

Скрипт инициализации слегка изменился:

$("a[href$='.jpg'],a[href$='.jpeg'],a[href$='.png'],a[href$='.gif']").attr('data-fancybox', 'gallery');
	
$(document).ready(function() {
	$('[data-fancybox="gallery"]').fancybox({

	});
});

Раздельные галереи

При открытии изображения fancybox показывает в галереи все изображения на странице с атрибутом data-fancybox=»gallery», т.е. в одной галереи. Если нужно чтобы галереи были разными, то нужно им задавать разные атрибуты data-fancybox.

data-fancybox="gallery01"
data-fancybox="gallery02"
data-fancybox="gallery03"
и т.д.

Добавляем общий скрипт для всех этих галерей (при этом отрываться они будут по раздельности):

// Options for all groups
$('[data-fancybox^="gallery"]').fancybox({
  thumbs : {
    autoStart : true
  },
  buttons : [
    'zoom',
    'close'
  ]
});

Стили при наведении

Чтобы при наведении был эффект:

a[data-fancybox] {position: relative; display: block;}

a[data-fancybox] img {display: block;}

a[data-fancybox]:before {
    position: absolute;
    top: 40%;
    left: 50%;
    margin: -8px 0 0 -9px;
    content: '\f002';
    font-family: FontAwesome5;
    font-weight: 600;
    color: #efefef;
    font-size: 18px;
    opacity: 0;
    z-index: 1;
    -webkit-transition: all 0.3s linear;
    transition: all 0.3s linear;
}

a[data-fancybox]:hover:before {top: 50%; opacity: 1;}

a[data-fancybox]:after {
    content: '';	
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
	left: 0;
    background: rgba(57, 73, 73, 0.7);
    opacity: 0;
    -webkit-transition: all 0.3s linear;
    transition: all 0.3s linear;
}

a[data-fancybox]:hover:after {opacity: 1;}