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

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


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

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

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

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

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

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

Установка:

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

 

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

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

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

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

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

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

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

 

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

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

 

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

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

ОтстойОчень плохоПлохоНиже среднегоНормальноМеня зацепилоКлассноШикарноВаще огонь!Это, блять, шедевр! (4 оценок, среднее: 10,00 из 10)

Отправить ответ

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

Войти с помощью: 
avatar
  Подписаться  
свежатина старость популярность
Сообщать о
Сергей
Гость

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

Ринат
Гость

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

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

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

Нэринс
Редактор

Добрый день.

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

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

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

Ринат
Гость

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

— это скрипт.

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

Ринат
Гость

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

Гость
Гость

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

Алекей
Гость

Подскажите можно ли сделать листалку (галерею) контента а не картинок?

Павел
Гость

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

fancyBox v3.1.20

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

Артём Зеленский
Участник

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

Цифровой
Гость

Какой-то этот фенсибокс сильно замороченный. 2я версия и то вроде попроще была

Criminalist
Участник

А как сделать вызов определенных групп картинок?

tp-20
Гость

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

Миша Гусев
Участник

А как сделать такое же оформление, как вы демке?

RayBread
Участник

Чекни исходник страницы, посмотри какие там изменения)