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


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

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

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

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

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

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

Установка:

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

 

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

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

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

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

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

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

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

 

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

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

 

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

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

Аватар

Apocalypse

Я не понял вашего вопроса, но постараюсь на него ответить...

Читайте также:

guest
45 Комментарий
Oldest
Newest
Inline Feedbacks
View all comments
Сергей
Гость
Сергей
3 лет назад

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

1
Ринат
Гость
Ринат
3 лет назад

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

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

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

0
truenerins
Editor
truenerins
3 лет назад
Reply to  Ринат

Добрый день.

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

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

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

0
Ринат
Гость
Ринат
3 лет назад

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

- это скрипт.

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

0
Ринат
Гость
Ринат
3 лет назад
Reply to  Ринат

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

0
Гость
Гость
Гость
3 лет назад

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

0
Гость
Гость
Гость
3 лет назад
Reply to  Apocalypse

Ссылка на страницу с плагином - goo.gl/xRWrts

0
Алекей
Гость
Алекей
2 лет назад

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

0
Павел
Гость
Павел
2 лет назад

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

fancyBox v3.1.20

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

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

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

0
Артём Зеленский
Участник
Артём Зеленский
2 лет назад
Reply to  Apocalypse

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

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

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

0
Цифровой
Гость
Цифровой
2 лет назад

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

0,6
Criminalist
Участник
Criminalist
2 лет назад

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

1
Денис Коломейцев
Участник
Денис Коломейцев
1 месяц назад
Reply to  Apocalypse

Привет, ты написал, как сделать группу картинок, я не нашёл, где в jquery.fancybox.min.js добавить эти строки. К тому же я не изучал JS. Мне надо. чтобы при клике на фото-ссылку открывалась галерея в мод.окне, но на странице с этой фото-ссылкой отображалось только одно фото, а сотальные уже в мод. окне. И как сделать. чтобы фото загружалось уже в мод. окне, а не при загрузке страницы? Заранее благодарю.

1
tp-20
Гость
tp-20
2 лет назад

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

1
Макс
Гость
Макс
1 год назад

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

1
Сервер
Гость
Сервер
9 месяцев назад
Reply to  Apocalypse

Тоже столкнулся с этой проблемой. Не понял. Можно поподробнее?
Спасибо.

1
Server1509
Участник
Server1509
9 месяцев назад
Reply to  Apocalypse

Есть такой код:

По какой то причине при клике на картинку из карусели открывается fancybox, в котором картинок 9 шт. (1, 2, 3, 4, 1, 2, 3, 4, 1). Не могу понять как отображать только 1, 2, 3, 4. Пока дополнительно для fancybox в css и js не прописывал.
Не знаю как сюда вставить скрин.

Спасибо.

1
Server1509
Участник
Server1509
9 месяцев назад
Reply to  Apocalypse

Я так и сделал... Только у меня почему-то дублируются картинки. Отображаются в таком порядке: 1, 2, 3, 4, 1, 2, 3, 4, 1.
Просто вчера вставился не весь код.

1
Server1509
Участник
Server1509
9 месяцев назад
Reply to  Apocalypse

1
Server1509
Участник
Server1509
9 месяцев назад
Reply to  Server1509

К сожалению почему то весь код не отображается, а толь эти строчки...

Временно сделал вывод по одной картинке:
https://paradet.com/phantom

Но хотелось бы при увеличении картинок можно было их листать, то есть объединить их в одну группу. Но тогда они дублируются и их получается по две...

0
Server1509
Участник
Server1509
9 месяцев назад
Reply to  Apocalypse

Столкнулся с этой проблемой. Не понял решение, а можно поподробнее?

Спасибо.

0
Ксения Лашкевич
Участник
Ксения Лашкевич
10 месяцев назад

Спасибо большое, очень полезный сайт!

1
Сервер
Гость
Сервер
9 месяцев назад

Добрый день.
Не совсем понятно выражение : платный для коммерческого использования. То есть если писать сайт для себя его не надо оплачивать?

1
bucloth
Гость
bucloth
6 месяцев назад

почему не применяются настройки, подскажите.
сам FancyBox работает, а настроить не получаться

1
Янтарь
Гость
Янтарь
5 месяцев назад

Спасибо!

1
Авторизация
*
*
Войти с помощью: 

45 + = 54

Регистрация
*
*
*
Войти с помощью: 
Генерация пароля