Fancybox 3 – дополнительные возможности

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

В прошлый раз я писал как работать с плагином, задавать всплывайки и фрэймы. Но в этом материале рассмотрим дополнительные возможности fancybox 3:

Пусть есть галерея с классом .mygal – инициализируем ее и посмотрим параметры:

<a href=”example-img/11_b.jpg” class=”mygal” data-fancybox=”example_group2″><img src=”example-img/11_s.jpg” /></a>
<a href=”example-img/12_b.jpg” class=”mygal” data-fancybox=”example_group2″><img src=”example-img/12_s.jpg”/></a>

<script type=”text/javascript”>
$(document).ready(function() {
$(“.mygal”).fancybox({
speed : 330, //скорость появления окна
loop : true, //галерея зациклена
infobar : true, // показать/скрыть кнопки след/пред слайд
buttons : true, // показать/скрыть справа вверху кнопки закрыть, список миниатюр, на весь экран
baseClass : ‘retro2’, // класс всплывайки
onComplete : function( instance, slide ) { alert(‘Картинка загружена ‘ + slide.src); }, //после полной загрузки слайда
});
});
</script>

Думаю из комментариев все понятно. Единственное, хочу обратить ваше внимание на baseClass, он позволяет вам задать любой класс, который добавится к текущей всплывайке, за счет которого можно легко поменять ее внешний вид.

Также, для интереса добавил событие onComplete – оно очень может пригодиться при до программировании плагина.

Список всех событий привожу ниже:

beforeLoad : function( instance, slide ) { alert(‘Сообщение0’); }, //Before the content of a slide is being loaded
afterLoad : function( instance, slide ) { alert(‘Сообщение1’); }, //When the content of a slide is done loading
beforeMove : function( instance, slide ) { alert(‘Сообщение2’); }, //перед сменой слайдов
afterMove : function( instance, slide ) { alert(‘Сообщение3’); }, //после смены слайда
onComplete : function( instance, slide ) { alert(‘Сообщение4’); }, //после полной загрузки слайда

onInit : function( instance, slide ) { alert(‘Сообщение5’); }, //When instance has been initialized
beforeClose : function( instance, slide ) { alert(‘Сообщение6’); }, //перед закрытием экземпляра
afterClose : function( instance, slide ) { alert(‘Сообщение7’); }, //после того, как экземпляр был закрыт
onActivate : function( instance, slide ) { alert(‘Сообщение8’); }, //When instance is brought to front
onDeactivate : function( instance, slide ) { alert(‘Сообщение9’); }, //When other instance has been activated

И еще один бонус – создадим в галереи кнопку на скачку картинки (вверху, справа):

<script type=”text/javascript”>
$(document).ready(function() {
$(“.mygal”).fancybox({
//создать пользовательскую кнопку на панели инструментов
onInit : function( instance ) { instance.$refs.downloadButton = $(‘<a class=”fancybox-button fancybox-download” download>Скач.</a>’).appendTo( instance.$refs.buttons ); },
beforeMove: function( instance, current ) { instance.$refs.downloadButton.attr(‘href’, current.src); }
});
});
</script>

Используйте Fancybox 3 в своих проектах и переходите на новый уровень! =)