В простом случае он ничем не отличается от подключения его без i-bem: добавить скрипт на страницу и вперед.

Если же хочется завернуть его в БЭМ-блок, то тут возможны варианты. Например (исхожу из того, что в качестве старта используется project-stub):

bower i fancybox --save # ставим плагин через bower

Создаем common.blocks/fancybox/fancybox.js со следующим содержанием:

modules.define('fancybox', ['i-bem__dom', 'jquery'], function(provide, BEMDOM, jQuery) {

// этот комментарий будет заменен `borschik`-ом на содержимое файла плагина
/*borschik:include:../../libs/fancybox/source/jquery.fancybox.js*/

provide(BEMDOM.decl(this.name, {
    onSetMod: {
        js: {
            inited: function() {
                // в момент инициализации блока будет включен fancybox
                this.domElem.fancybox();
            }
        }
    }
}, {
    live: function() {
        // блок будет проинициализирован, когда на него будет наведен курсор
        this.liveBindTo('mouseover');
    }
}));

});

Шаблон common.blocks/fancybox/fancybox.bemhtml.js, чтобы i-bem знал, что на блоке нужно инициализировать JS:

block('fancybox')(
    js()(true)
);

И подключаем в сборку стили с помощью common.blocks/fancybox/fancybox.css:

@import "../../libs/fancybox/source/jquery.fancybox.css";

спасибо, все работает! но тут же возникли еще несколько вопросов: 1) только borschik можно подтягивать зависимости или есть другие варианты подключения 2) что за магия, вижу что в css файле пути к картинкам выставились правильно 3) как повторно использовать fancybox для другого блока например: block: 'test'

За магию с путями к картинкам тоже отвечает borschik.

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

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

В BEMJSON параметры можно пробрасывать в JS через поле js:

{
    block: 'fancybox',
    js: { something: 'param1' }
}

Значение этого поля доступно в JS-коде блока в this.params. Соответственно, для инициализации fancybox с параметрами, достаточно вызывать его так:

this.domElem.fancybox(this.params);

спасибо!

Привет! есть получше решение группировки изображений rel='group' ?

inited: function() {
        jQuery('.fancybox').fancybox();
 }

пример выше не вариант, не могу пробросить параметры

Я не уверен, что правильно понимаю проблему. Если речь о том, что на странице есть куча айтемов, которые должны превратиться в сгруппированный fancybox, то я бы блоком fancybox назначил их общего родителя, а сами «слайды» — его элементом slide.

Получилось бы что-то типа:

modules.define('fancybox', ['i-bem__dom'], function(provide, BEMDOM) {

provide(BEMDOM.decl(this.name, {
    onSetMod: {
        js: {
            inited: function() {
                this.elem('slide').fancybox(this.params);
            }
        }
    }
}));

});

да спс в принципе это решает данную проблему

Добрый день!

Есть вопросы по использованию fancyBox, по заповедям БЭМ. Для отработки вопросов, возьмем за пример блок с картинками. При клике на картинку всплывает окно просмотра, листаются картинки, закрывается. Пример здесь, первая галерея - http://websketches.ru/plugins/fancybox Блок имеет реализацию: JS, BEMHTML, CSS - по схеме из этой темы .

1) jquery.fancybox.js - как правильно подключить в bundles/*.bemjson.js, что бы производительность не пострадала? В head, перед закрывающим тегомbody, на своем хостинге или cdn? 2) Как произвести настройки fancybox? Непосредственно в ../../node_modules/fancybox/dist/js/jquery.fancybox.js? Если да, то при сборке в продакшн необходимо в настройках сборщика это декларировать, что бы на выходе получить его? Или каким способом это нужно делать? 3) Самый не понятный момент - как в bundles/*.bemjson.js декларировать картинки, или отдельно блок с display: none, и ссылаться на него ?

Ожидается на выходе получить галерею, как в приведенном примере. Прошу сильно не пинать, первый опыт использования fancyBox, знание JS - 0.5 из 5

jquery.fancybox.js - как правильно подключить

Если подключать в BEMJSON, то логично подключить после основного JS-бандла в секцию scripts блока page, что в результате отрендерит его перед закрывающим body.

на своем хостинге или cdn?

Зависит от того, насколько популярен CDN и где расположены сервера. В теории CDN должен быть эффективнее, конечно.

Однако есть еще вариант с тем, чтобы включить код jquery.fancybox.js в основной JS-бандл, тогда экономится лишний HTTP-запрос. Сделать это можно с помощью borschik.

Как произвести настройки fancybox?

Стоит создать блок на уровне проекта и конфигурировать из него. Изменять исходный код библиотеки определенно не стоит — это, как минимум, лишает возможности обновляться на новые версии в будущем.

как в bundles/*.bemjson.js декларировать картинки

Не очень понимаю, что подразумевается в этом вопросе. Нужны подробности.

как в bundles/*.bemjson.js декларировать картинки

Не очень понимаю, что подразумевается в этом вопросе. Нужны подробности.

{
    block : 'image-layout', 
    content :[
        {
            block: 'view-img',
            mix: {block: 'image-layout', elem: 'view-img'},
            attrs: [{href: '../../node_modules/fancybox/demo/1_b.jpg'}, {rel: 'img-group'}],
            content: [
                {
                    block: 'image',
                    mix: {block: 'image-layout', elem: 'image'},
                    url: '../../node_modules/fancybox/demo/1_b.jpg',
                    title: 'image'
                }
            ]
        }
    ]
}

block('image-layout')(
    block('view-img')(
        tag()('a')
    )
);

То есть следующий подход - верный?

• задать ссылку
• назначить ссылке - href, rel
• взять jquery.fancybox.js с настройками, добавить его в реализацию JS - fancybox.js (для переопределения настроек), где код инкапсулирован в модуль и есть зависимость от jquery

и должно сработать, и всё по БЭМ. Или в чем то ошибаюсь?

В целом похоже на правду.

Но есть несколько моментов:

1. Атрибуты задаются одним объектом (должно быть { href: '../../node_modules/fancybox/demo/1_b.jpg', rel: 'img-group' }).
2. Шаблоны не поддерживают синтаксис со вложенностью. Должно быть просто block('view-img')(tag()('a'))

Шаблоны не поддерживают синтаксис со вложенностью. Должно быть просто block('view-img')(tag()('a'))

У меня сработало))) Не знаю как, но сработало.

Совершенно точно сработало не то, что ожидалось ;)

что ожидал, то и получил. Это не первый раз уже - трюк со вложенностью.

Да, казалось бы, но нет :) https://goo.gl/8EFpfa — шаблон применяется ко всем b2, не зависимо от вложенности в b1.

Да, понял о чем речь. Спасибо

Добрый день! fancybox так и не заработал Консоль выдает ошибку

Uncaught ReferenceError: jQuery is not defined
    at jquery.fancybox.js:2018

Оформил gist с файлами common.blocks/fancybox

Как вижу проблему:

• Зависимость от jQuery не срабатывает

Возможно из-за сборки gulp, непонимания, мистических влияний и т.д.

Прошу помочь разобраться, маленькими шажками привести к рабочему состоянию fancybox

Есть подозрения на параметр - строка 2018 jquery.fancybox.js добавил в gist третий параметр - jQuery Помогите пожалуйста