/ Scripts & jquery / Fancybox без плагина

Fancybox без плагина

HIT

05.09.2016

5301

2

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

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

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/2020/06/Dobavlyaem-opisanie-k-izobrazheniyam.jpg" data-caption="This is the caption"><img src="/wp-content/uploads/2020/06/Dobavlyaem-opisanie-k-izobrazheniyam-700x533.jpg" alt="" width="700" height="533"/></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, а не в виде квадратных скобок

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

Но чтобы получить атрибут alt нужно использовать доп.функцию определения ID

// Получить ID изображения
function cmb_get_image_id($image_src) {
    global $wpdb;
    $image = $wpdb->get_col($wpdb->prepare("SELECT ID FROM $wpdb->posts WHERE guid='%s';", $image_src )); 
    return $image[0]; //return the image ID
}

Далее получаем alt

<?php $attachment_url = wp_get_attachment_image_url( $id, 'full' );
	$attachment_id = cmb_get_image_id($attachment_url); 
	$image_alt = get_post_meta($attachment_id, '_wp_attachment_image_alt', true); ?>

Если выводятся изображения плагином Featured Galleries, то ID там есть в цикле

<?php $galleryArray = get_post_gallery_ids($post->ID); ?>
<?php foreach ($galleryArray as $id) { ?>
	<?php $image_alt = get_post_meta($id, '_wp_attachment_image_alt', true); ?>
	<a href="<?php echo wp_get_attachment_image_url( $id, 'full' ); ?>" data-caption="<?php echo $image_alt; ?>"><img src="<?php echo wp_get_attachment_image_url( $id, 'rectangle' ); ?>"></a>
<?php } ?>

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'
  ]
});
Если делать раздельные галереи на slick carousel, и у slick установлен параметр infinity true, то в галереи fancybox будет каждого изображения по два.

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

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

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;}

the requested content cannot be loaded

Это возникает в случае указания в href адреса изображения из текста. Происходит это из-за параметра data-type=»URL» которое добавляется к ссылке. Решается добавлением следующего скрипта:

jQuery("a[href$='.jpg'],a[href$='.jpeg'],a[href$='.png'],a[href$='.gif'],a[href$='.webp']").attr('data-type', 'image');

Конфликт со слайдером

Если у слайдера есть миниатюры. Открыв (увеличив) изображение и в режиме fancybox перелистав на другой изображение, при возврате в слайдере будет то изображение которое было в перемотке fancybox. И иногда это сбивает синхронизацию слайдов и миниатюр слайдов. В этом случае мы можем отключить функцию (backFocus: false) возврата и анимацию на текущий слайд.

jQuery(document).ready(function() {
	jQuery('[data-fancybox="gallery"]').fancybox({
		backFocus: false,
		buttons: [
			"zoom",
			//"share",
			"slideShow",
			//"fullScreen",
			//"download",
			//"thumbs",
			"close"
		],
	});
});

Также тут приведена функция выборочного набора кнопок fancybox.

Поделиться в соц. сетях:

  • Комментарии
  • Вложения

Добавить комментарий

2 комментария

  1. Андрей
    13.04.2019 в 22:37

    Ничего не понял. Что куда вставлять? И зачем мне всю папку плагина скачивать?

    Ответить
    1. Alexandr
      19.01.2020 в 13:20

      Из всей папки плагина нам нужны только: jquery.fancybox.min.css, jquery.fancybox.min.js. Подключаем их на сайте:
      function addsitefancybox() {
      wp_enqueue_style( 'sitefancybox', plugins_url('/jquery.fancybox.min.css', __FILE__) );
      wp_enqueue_script( 'sitefancybox', plugins_url('/jquery.fancybox.min.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('data-fancybox', 'gallery');
      Это все. Но я все это делаю в виде плагина, чтобы подключать только к сайтам где это требуется.

      Ответить
Fancybox без плагина Fancybox без плагина
Мини-корзина в Header
Рекомендации для васМини-корзина в HeaderOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.