четверг, 23 ноября 2017 г.

Настройка и кастомизация FancyBox

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

Как открыть существующий контент в окне fancybox?

Это очень важная проблема, так как иногда на существующем контенте уже висят какие-нибудь обработчики событий и не хотелось бы их потерять... Fancybox может открыть нужный вам контент правильно, без потери обработчиков, делается это примерно вот так:
$( 'a.fancypops' ).on( "click", function() {
        var title = $(this).attr('title');

        $.fancybox.open( {href : "#your-container-id"},{
            padding     : 30,
            fitToView   : true,
            autoSize    : true,
            closeClick  : false,
            openEffect  : 'fade',
            closeEffect : 'fade',
            wrapCSS     : 'custom-fancypops',
            helpers     : {
                title : { type : 'inside' },
                overlay : {
                    opacity : 0.4,
                    locked: true
                }
            },
            afterLoad : function(e, i) {
                this.title = title;
            }
        } );
});
Разберем самое важное из приведенного кода:
wrapCss - Это CSS-класс который будет назначен враперу, с помощью этого класса можно кастомизировать вид fancybox.
helpers.title - Вывод заголовка fancybox.
afterload.this.title - Установка значения для заголовка

Как закрыть все FancyBox?

Чтобы закрыть все модальные окна можно использовать такой код:
if ($('.fancybox-wrap').length) {
    $.fancybox.close();
}
Этот код выполняет проверку существования модальных окон и закрывает их в случае прохождения проверки.

Комментариев нет:

Отправить комментарий

Linux командная строка узнаем оставшееся место

Чтобы посмотреть общую картину того, сколько места осталось в системе можно выполнить команду: df -h Чтобы вывести на экран сколько мес...