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

* Плагин обновлён до версии 3.7

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

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

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

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

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

Установка:

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


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

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


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

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

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

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

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


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


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

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

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

Apocalypse

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

Вам может также понравиться...

Подписаться
Уведомить о
guest

53 Комментарий
Старые
Новые
Межтекстовые Отзывы
Посмотреть все комментарии
Сергей
Гость
Сергей
6 лет назад

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

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

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

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

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

0
truenerins
Редактор
6 лет назад
Ответить на  Ринат

Добрый день.

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

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

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

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

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

- это скрипт.

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

0
Ринат
Гость
Ринат
6 лет назад
Ответить на  Ринат

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

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

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

0
Гость
Гость
Гость
6 лет назад
Ответить на  Apocalypse

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

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

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

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

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

fancyBox v3.1.20

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

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

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

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

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

0
Артём Зеленский
Участник
Артём Зеленский
6 лет назад
Ответить на  Apocalypse

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

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

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

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

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

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

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

1
Денис Коломейцев
Участник
Денис Коломейцев
3 лет назад
Ответить на  Apocalypse

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

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

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

1
Макс
Гость
Макс
5 лет назад

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

1
Сервер
Гость
Сервер
4 лет назад
Ответить на  Apocalypse

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

1
Server1509
Участник
Server1509
4 лет назад
Ответить на  Apocalypse

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

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

Спасибо.

1
Server1509
Участник
Server1509
4 лет назад
Ответить на  Apocalypse

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

1
Server1509
Участник
Server1509
4 лет назад
Ответить на  Apocalypse

1
Server1509
Участник
Server1509
4 лет назад
Ответить на  Server1509

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

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

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

0
Server1509
Участник
Server1509
4 лет назад
Ответить на  Apocalypse

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

Спасибо.

0
Ксения Лашкевич
Участник
Ксения Лашкевич
4 лет назад

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

1
Сервер
Гость
Сервер
4 лет назад

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

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

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

1
Янтарь
Гость
Янтарь
3 лет назад

Спасибо!

1
Sveta_2021
Участник
2 лет назад

Здравствуйте, как можно добавить оценку выводимой картинке (типа как на рисунке).
https://i.ibb.co/LdtDzDk/123.jpg При попытке кликнуть на радиобокс, картинка закрывается.

1
avcore Avcore
Участник
1 год назад

Как на с одной странице в fancybox (блок из 5 видео youtube одной тематики) модально открыть через ссылку определенный слайд-видео, например третий - modal3. Не могу разобраться с мультимодальностью, то открываются сразу все, то только последний.

0
avcore Avcore
Участник
1 год назад
Ответить на  Apocalypse

Да, 5 разным ссылкам 5 разных видео — каждой ссылке своё видео. Я написал в личку, там не чистое видео youtube, а видеопоток m3u8 с в/плейером playerjs (https://inlnk.ru/0QJm31). Предварительно: загружен на странице в заголовке head — playerjs.js. Вопрос как правильно открыть на странице (например 3 ссылку (id='video3') из 5 ссылок общ.тематики) модально или ajax в галерее fancybox — video3stream.m3u8 с id='video3' в div'е.
Например 2 ссылки на странице, их достаточно:
https://inlnk.ru/84ZeDv и https://inlnk.ru/84ZeDv

версия fancybox 3.5

1
Последний раз редактировалось 1 год назад avcore Avcore ем
avcore Avcore
Участник
1 год назад
Ответить на  Apocalypse

В личке нет ничего. А всё нашел index.zip, через Исходный код выделенного фрагмета на странице. Спасибо тебе добрый человек, благодарю! Запустил работает! Ура!
p.s.
Ещё 1 момент. Как выходить из iframe fullscren на начальную страницу со ссылками? Например клавишей Escape или правой кнопкой мышки. Просто я создал apk приложение из этого html, клик ссылки на видео работает, показывает видеопоток, а выход на общую страницу нет, сразу выход из приложения. А так всё воспроизводится, но тормозит жутко на слабом cpu android tv box, а на смафтфоне нормально. Всё равно не то.

0
Последний раз редактировалось 1 год назад avcore Avcore ем
53
0
Оставьте комментарий! Напишите, что думаете по поводу статьи.x