Fancybox. Дополнительные возможности.

Обзор некоторых возможностей плагина fancybox.


Приветствую всех читателей блога. В прошлом посте о плагине Fancybox мы его подключили и настроили. Сегодня рассмотрим некоторые дополнительные возможности плагина, которые могут быть полезны.



Изменение цвета и прозрачности фона.

Используя свойство overlay в хелпере можно настраивать цвет и непрозрачность затемняющего фона вокруг блока плагина.
helpers : {
        overlay : {
            css : {
                'background' : 'rgba(58, 77, 77, 0.7)'
            }
        }
}

Получить титры из отдельного блока.

Можно подключить титры и ссылки для изображений из отдельного блока. Для этого добавляем к ссылке атрибут data-title-id и создаем блок с аналогичным идентификатором. В скрипте добавляем следующий код:
beforeLoad: function() {
    var el, id = $(this.element).data('title-id');
    if (id) {
       el = $('#' + id);     
       if (el.length) {
           this.title = el.html();
       }
   }
}

Показываем title при наведении.

Теперь рассмотрим возможность показывать титры только при наведении курсора на блок с изображением. Для этого после загрузки изображения создадим две анонимных функции. Первая будет отвечать за состояние титров при наведении и вторая при убирании курсора мыши.
afterShow: function() {
    $(".fancybox-title").wrapInner('
').show(); $(".fancybox-wrap").hover(function() { $(".fancybox-title").show(); }, function() { $(".fancybox-title").hide(); }); }

Избирательное применение свойств по id.

Чтобы применить какое-то свойство избирательно к какому-нибудь элементу достаточно прописать для него условие:
if ($(this.element).attr('id') == 'element_id') {}
К примеру будем показывать титры при наведении только у элемента с id равным item12:
afterShow: function() {
    if ($(this.element).attr('id') == 'item12') {
        $(".fancybox-title").wrapInner('
').show(); $(".fancybox-wrap").hover(function() { $(".fancybox-title").show(); }, function() { $(".fancybox-title").hide(); }); } }

Показываем файлы PDF.

И еще одна полезная функция плагина – это возможность показывать файлы PDF. Для этого выводим содержимое в виде фрейма:
Просмотр PDF файла

И прописываем скрипт:
$('.pdf1').fancybox({
   openEffect  : 'none',
   closeEffect : 'none',
   width: '90%',
   height: '100%',
   iframe : {
       preload: false
   }
});

См. так же: Fancybox. Подключение.

1 комментарий :

Ваш комментарий: