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: 23 комментария

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

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

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

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

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

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

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

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

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

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

    — это скрипт.

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

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

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

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

    fancyBox v3.1.20

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

  6. Доброго времени суток. Подскажите, пожалуйста, как изменить код что бы модальное окно грузилось не в BODY, а в определенный DIV с ID. Заранее спасибо!

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

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

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

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

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

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

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

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

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

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

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