FancyBox 3 — Мощнейшая адаптивная галерея и модальные окна на jQuery

FavoriteLoadingДобавить в закладки


Скачать [ZIP] [16 КБ]

Очень крутая штука, которая позволит вам открывать на своём сайте полноценные:
- Картинки и галереи картинок
- Ajax окна со своими обработчиками
- YouTube ролики и ролики с других сервисов
- Iframe окна
- Модальные окна со своим содержимым

Для начала посмотрите ДЕМО

Официальный сайт проекта КЛИК

Всё выполнено в потрясающем современном адаптивном стиле! Ребят, если вы попробуете этот плагин единожды, забудете обо всех остальных альтернативных плагинах. Как бонус - из изображений или даже изображений и ссылок, связанных одинаковым параметром data-fancybox (например, несколько картинок с data-fancybox="image") образуется мини-галерея. Очередной особенностью является возможность использовать мультитач жесты и навигацию с клавиатуры!

В общем, не мог не опубликовать на сайте столь шедевральную находку!

Установка:

1#: Для начала после ‹/head› на нужных страницах вставьте:

 

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

- Простая галерея:

 
- Открытие ссылок в айфрейме:

 
- Открытие модального окна со своим контентом:

 
- Открытие модального окна с содержимым из элемента на сайте:

 
- Открытие модального окна с AJAX запросом:

 
- Открытие социальных элементов:

 

#3: Все доступные опции для плагина:

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

 

Осталось лишь залить JS файл из прикреплённого архива в папку js и CSS файл в папку css

Материал перевёл и подготовил Apocalypse

FancyBox 3 — Мощнейшая адаптивная галерея и модальные окна на jQuery: 25 комментариев

  1. Отличная статья! Мне тоже очень понравилось обновление fancybox, но документация у них не очень подробная. Пока у меня так и не получилось сделать Customized layout, как у них в примере на сайте. Интересно было бы почитать про новые возможности (модальные окна, эффекты и прочее) с реальными примерами реализации.

    0
    1. Так возьми из исходного кода примера то, что нужно. Касаемо модальных окон, эффектов и прочего — для этого плагина FancyBox 3 или вообще тебе интересны другие плагины и решения?

      0
  2. Подскажите пожалуйста.

    Есть товар, при нажатии на него открывается модальное окно fancybox с формой заказа. Как в эту форму передать ID товара, например в

    Заранее спасибо большое.

    0
    1. Добрый день.

      Ну как вариант можно привязать onclick на кнопку вызова модального окна, примерно с таким содержанием:

      Ну соответственно все class заметить на свои. В идеале лучше бы даже использовать id вместо class (но тогда они НЕ должны быть одинаковые).

      P.S Может Apocalypse, позже чего получше предложит.

      0
  3. — это html кнопки Заказать под товаром.

    — это скрипт.

    Все работает как нужно, спасибо большое.

    0
    1. А это html кнопки заказать под товаром.

      0
  4. Подскажите пожалуйста куда именно на ucoz вставлять опции плагина, а то никак не могу подключить
    сам плагин работает а вот опции нет

    0
  5. Здравствуйте!
    Не могу запретить закрытие модального окна. Вызываю так

    fancyBox v3.1.20

    Но при клике на бэкграунд окно все равно закрывается… как запретить пользователю закрывать окно при клике вне его? Спасибо!

    0
    1. Я не вижу способа проделать такое. Все элементы модального окна формируются в своих собственных контейнерах внутри body и потом скрипт обращается ко всем этим элементам

      0
      1. Спасибо за ответ.
        Есть еще одна просьба.
        Можно увидеть пример применения: Открытие модального окна со своим контентом:

        $.fancybox.open(‘Здесь может быть любой ваш контент’);

        а именно открытие при клике на ссылку. Спасибо!

        0
        1. Ну используй конструкцию с блоком:

          0
    1. А для группы картинок прописывай параметр data-fancybox

      0
  6. очень качественная библиотека. оформление отличное. больше всего радует, что нужно подключить только одну js-библиотеку и один css-файл. раньше было 4 разных js скрипта и все нужно было подключать. тут же всё облегчили и меньше запросов стало

    10
  7. Подскажите пожалуйста, как из fancyBox исключить картинки с классом cloned? есть карусель с картинками Owl Carousel и кнопкой для увлечения через fancyBox если в самой карусели картинок 5 то уже fancyBox в своей карусели на счётчике показывает 11, 5 клонов и ещё один активный клон…

    10

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

Войти с помощью: 

Ваш e-mail не будет опубликован.

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.