Fancybox 3 с темой оформления

Fancybox — один из самых популярных плагинов на jQuery для реализации модальных окон.

В этой теме рассмотрена его быстрое подключение и настройка. А также добавлена альтернативная тема оформления, позволяющая немного разнообразить его стандартный вид.

1. Установка

Ссылки даны на необходимые файлы версии 3.5.7. Более новую версию или дополнительную информацию можно посмотреть на сайтах github.com и fancyapps.com

Если использовать стандартные настройки и атрибуты, то инициализировать скрипт нет необходимости.

Если нужно подключить fancybox к определенным элементам, то используется:

2. Использование

Fancybox может отображать в модальных окнах изображения, видео, iframes и любой HTML-контент. Для этого плагин имеет много дополнительных атрибутов и JS вариантов, но в этой теме описаны только основные. Более подробную информацию можно посмотреть в первоисточнике.

2.1 Изображения

Для показа галереи фотографии все ее элементы должны содержать одинаковое значение атрибута data-fancybox="gallery". Для одиночного фото этот атрибут может быть пустым data-fancybox. Атрибут data-caption используется для описания изображения и является не обязательным.

2.2 Видео

Для видео можно добавить значение атрибута data-fancybox для создания галереи/плейлиста и описание data-caption

2.2.1 Видео с поддержкой Rutube

Вместо оригинального JS плагина подключаем: jquery.fancybox.rutube.js или минимизированный jquery.fancybox.rutube.min.js

Решение найдено на github у пользователя evikza

2.3 Фрейм <iframe>

Обязательный атрибут data-type="iframe" и data-src, который указывает ссылку на страницу или PDF документ.

Также можно добавить значение для data-fancybox и атрибут data-caption

2.4 Встроенный HTML-элемент

Атрибут data-src указывает на ID элемента, который будет показан в модальном окне

Можно добавить атрибут data-caption и значение data-fancybox

2.5 Ajax

Обязательный атрибут data-type="ajax" и data-src, который указывает ссылку на подгружаемый контент.

Как и во всех предыдущих случаях, можно добавить data-caption и значение data-fancybox

3. Основные настройки

Тут описаны лишь основные настройки. Шаблоны, мобильные и редко используемые конфигурации можно посмотреть в полном списке

Пример использования:

По умолчанию они имеют следующие значения:

loop: false

Включает бесконечную навигацию по галерее.


gutter: 50

Горизонтальное расстояние между слайдами.


keyboard: true

Включает навигацию с помощью клавиатуры.


preventCaptionOverlap: true

Запрещает подписи модального окна перекрывать его содержимое. Значение false - разрешает.


arrows: true

Показывает навигационные стрелки по краям экрана (для галереи)


infobar: true

Показывает счетчик изображений в верхнем левом углу (для галереи)


smallBtn: "auto"

Маленькая кнопка закрытия модального окна

"auto" - автоматически включена для "html", "inline" или "ajax" окон

true - включена для всех окон

false - выключена для всех


toolbar: "auto"

Показывает тулбар (справа вверху)

"auto" - автоматически выключится, если активен smallBtn

true - включен для всех окон

false - выключен для всех


buttons: [
   "zoom",
   //"share",
   "slideShow",
   //"fullScreen",
   //"download",
   "thumbs",
   "close"
],

Устанавливает, какие кнопки будут показаны в тулбаре


protect: false

Отключает правую кнопку мыши и использует простую защиту изображений


modal: false

Делает контент "модальным" - отключает навигацию по клавиатуре, кнопки закрытия и т. д


animationEffect: "zoom"

Анимационный эффект открытия и закрытия окон

false - выключен

"zoom" - увеличение изображения из эскиза и уменьшение в него при закрытии

"zoom-in-out"

"fade"


animationDuration: 366

Продолжительность эффекта анимации


zoomOpacity: "auto"

Прозрачность при открытии и закрытии


transitionEffect: "fade"

Эффект перехода между слайдами

Может быть: "fade", "slide", "circular", "tube", "zoom-in-out", "rotate" или false (без эффекта)


transitionDuration: 366

Продолжительность эффекта перехода между слайдами


hideScrollbar: true

Скрывает вертикальную полосу прокрутки браузера


autoFocus: true

Устанавливает фокус на первом фокусируемом элементе после открытия


backFocus: true

Ставит фокус обратно на активный элемент после закрытия


trapFocus: true

Не позволяет пользователю сфокусироваться на элементе вне модального контента


fullScreen: {
   autoStart: false
}

Открывает окна в полный экран


touch: {
   vertical: true,
   momentum: true
},

vertical - разрешает перетаскивание содержимого по вертикали

momentum - продолжает движение после освобождения мыши / касания


slideShow: {
   autoStart: false,
   speed: 3000
},

Автоматически включает слайдшоу с заданной скоростью.


thumbs: {
   autoStart: false,
   hideOnClose: true,
   parentEl: ".fancybox-container",
   axis: "y"
},

autoStart - отображение миниатюр при открытии

hideOnClose - скрывает сетку миниатюр, когда начинается анимация закрытия

parentEl - родительский элемент

axis - вертикальная (y) или горизонтальная (x) прокрутка


wheel: "auto"

Прокрутка изображений колесом мышки


clickSlide: "close"

Закрытие окна по клику вне его. false - отключает

4. События

Пример использования:

beforeLoad

Вызывается перед загрузкой содержимого


afterLoad

Вызывается после загрузки содержимого


beforeShow

Вызывается перед показом окна


afterShow

Вызывается после показа окна


beforeClose

Вызывается перед закрытием окна


afterClose

Вызывается после закрытием окна


onInit

Вызывается когда окно было инициализировано


onActivate

Вызывается когда окно выводится на передний план


onDeactivate

Вызывается когда было активировано другое окно

5. Тема оформления

Вместо родного стиля fancybox подключаем стиль jquery.fancybox.atuin.css и инициализирум:

6. Источники, копирайты и лицензия

Смотрите также:

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

Ваш комментарий отправлен!

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

  • Читатель:

    Как отцентрировать миниатюры при их расположении внизу экрана?

    Ответить
  • Артём:

    Здравствуйте, подскажите пожалуйста, вроде всё сделал, но почему то у меня не появляются стрелки пролистывания и вверху крестик не видно, не подскажите в чём причина?

    Ответить
    • Alexander:

      Нужно результат видеть, так сложно сказать.

      Ответить
  • Дмитрий:

    Командир, в свете того, что скоро Трубу закроют, может, внедрите пруф, как делать в Fancybox видео из ВК))

    Ответить
    • Alexander:

      Фреймом
      Получаем у ВК код видео, выбрав "Копировать код для встраивания", он будет примерно таким:

      <iframe src="https://vk.com/video_ext.php?oid=-167164139&id=456239562&hash=c26c5130151ee2a6" width="640" height="360" frameborder="0" allowfullscreen="1" allow="autoplay; encrypted-media; fullscreen; picture-in-picture"></iframe>

      И дальше эту ссылку ставим как фрейм:

      <a data-fancybox="" data-type="iframe" data-src="https://vk.com/video_ext.php?oid=-167164139&id=456239562&hash=c26c5130151ee2a6" href="javascript:;">
          Ссылка на видео
      </a>
      Ответить
  • Валерий:

    Доброго времени суток, ну подскажите пожалуйста, можно ли видео с ютуб что:

    <div class="col-xs-6 col-md-3"><a data-caption="YouTube" class="fanphoto" data-fancybox="video" href="https://www.youtube.com/watch?v=30BQjlXXamY"><img src="Без картинки" alt=""/></a><div class="text-center robo f20 margin-bottom-20">YouTube</div>
    </div>

    Сделать без картинки превью, а так как оно есть.

    Ответить
    • Alexander:

      Не совсем понял, если видео вставлять как оно есть, зачем вообще fancybox, а если с текстом YouTube, то просто не нужно ставить картинку:

      <a data-fancybox="" href="https://www.youtube.com/watch?v=30BQjlXXamY">
          YouTube
      </a>
      Ответить
  • Mike:

    Здравствуйте! было бы здорово если б html содержимое можно было листать крутя колесико мыши, не подскажите как это реализовать?

    Ответить
    • Alexander:

      Есть несколько встроенных HTML элементов, которые идут как галерея?
      Добавьте в настройки wheel: "",

      Ответить
  • Дмитрий:

    Доброго дня!
    А скажите, если несколько кнопок iframe, соответственно, открываемых окон, а можно ли их сделать с возможностью перехода, как в случаях с гелереями фото и видео?
    Спасибо!

    Ответить
    • Alexander:

      Прописать на все одно значение, например:

      data-fancybox="myiframes"
      Ответить
  • Дмитрий:

    Здравствуйте!
    Скажите, а Вы пробовали ifreme открывать, если ссылка будет с http, а не https?
    Откроется?
    Спасибо!

    Ответить
    • Alexander:

      Если сайт на https, а фрейм открывается через http, то скорее всего он будет заблокирован.
      Мозила, например, так пишет:
      Заблокирована загрузка смешанного активного содержимого «http://site.ru/»

      Ответить
      • Дмитрий:

        Ок. Спасибо, будем пробовать)
        Отличное решение, особенно Ваша стилизация - потрясающая!!

        Ответить