Офис НП AMWAY в Ярославле
→ На карте Купить AMWAY: офис в ЯрославлеКонсультации, презентации, мастер–классы, знакомство с продукцией, заказ и выдача купленного товара:
●Адрес: улица Валентины Терешковой, дом 1 (Вход со двора)
●Телефон: +7 (920) 112-00-91
●Email: matyxho@mail.ru
●Сайт: https://www.amway.ru/user/lebedem
●Визитка: http://yar.meweb.ru
Иерархия статей
Статьи » HTML, CSS, JS » FancyBox: красивый вывод изображений и модальные окна
Сниппет
Сейчас я с тобой, уважаемый читатель, рассмотрю простые способы подключения сего прекрасного плагина.
FancyBox: красивый вывод изображений и модальные окна
Красивый вывод фото и изображений
FancyBox является прекрасной, а я бы даже сказал- лучшей, альтернативой ColorBox. Для начала мы идем сюда, и качаем JQuery FancyBox v2.1.4. Не буду рассусоливать, переходим сразу к установке( не забудьте только архив распаковать).
Подключение:
Код: HTML5
<script src='/lib/jquery-1.9.1.min.js'></script>
<!--подключили библиотеку JQuery-->
<link rel='stylesheet' href='/source/jquery.fancybox.css' media='screen' />
<!--подключили стиль-->
<script src='/source/jquery.fancybox.pack.js'></script>
<!--подключили плагин fancybox, а теперь задаем ему параметры-->
<script>
$(function() {
$('.fancybox').fancybox();
<!--сюда мы можем добавить параметры индивидуальных настроек, которые представлены ниже. Внизу на демо настройки по умолчанию-->
});
</script>
Все это дело желательно подключать в теге <head>, до его закрытия </head>, однако я подключал и позже, и ошибок не наблюдал.
Ты не поверишь, но на этом почти все! Да-да, вот так просто! Теперь осталось только сделать сам вывод, а точнее- указать ссылке на изображение/ фото класс.
Вывод:
Код: HTML
<a class='fancybox' rel='group' title='Описание изображения, которое будет выведено' href='url_изображения'><img src='url_превью'></a>
Идентификатор rel='group' задает параметр вывода всех изображений на странице для перехода между ними. То есть, если мы его исключим, изображения будут показываться одиночно, без листания.
Атрибут title в url ссылки задает описание изображения, которое будет выведено под самим изображением. Смотрится весьма неплохо. А самое главное- минимум изменений в самом коде- за что я и люблю этот плагин.
Модальные всплывающие окна HTML
Все так же довольно просто. Например, всплывающая подсказка будет выглядеть примерно так:
Код: HTML
<a class='fancybox' id='inline' href='#data'>Подсказка</a>
<div id='data' style='display:none;'>Данное содержимое появится при клике на ссылку</div>
Ну вот, в принципе, и все. Далее приведу небольшие параметры настроек, которые ты можешь задать.
padding - Пространство между контейнером FancyBox и контентом. По умолчанию 10.
margin - Пространство между областью просмотра и контейнером FancyBox, по умолчанию 20.
opacity Если true, прозрачность контента меняется. По умолчанию false.
modal - Если true, для 'overlayShow' присваивается значение 'true', а для 'hideOnOverlayClick', 'hideOnContentClick', 'enableEscapeButton', 'showCloseButton' присваивается значение 'false'. По умолчанию false.
cyclic - Если true, галерея будет циклической, позволяя использовать для нажатия кнопки next/back. По умолчанию false.
scrolling - Передает значение для CSS свойства overflow для создания или скрытия полосы прокрутки. Может быть передано 'auto', 'yes', или 'no'. По умолчанию 'auto'.
width - Ширина для контента типов 'iframe' и 'swf'. Также выставляет ширину для строчного контента, если 'autoDimensions' имеет значение 'false'. По умолчанию 560.
height - Высота для контента типов 'iframe' и 'swf'. Также выставляет высоту для строчного контента, если 'autoDimensions' имеет значение 'false'. По умолчанию 340.
autoScale - Если true, FancyBox масштабируется для заполнения области просмотра. По умолчанию true.
autoDimensions - Для строчного и ajax контента, подгоняет размеры области просмотра к размеру элемента. Убедись, что у него заданы размеры, в противном случае это может привести к непредсказуемым результатам. По умолчанию true.
centerOnScroll - Если true, FancyBox центрируется, когда страница прокручивается. По умолчанию false.
hideOnContentClick - Включает/ выключает закрытие FancyBox по клику на основном контенте. По умолчанию false.
overlayShow - Определяет, показывать ли фоновое затеменение вокруг FancyBox. По умолчанию true.
overlayOpacity - Прозрачность фонового затемнения. 0-1. По умолчанию 0.3.
overlayColor - Основной цвет фонового затемнения. По умолчанию '#666'.
titleShow - Включает/ выключает отображение title. По умолчанию true.
titlePosition - Позиционирование title. Может принимать значение 'outside', 'inside' или 'over'. По умолчанию 'outside'.
titleFormat - Обратная функция для пользовательской настройки области title. Можно задать любой HTML - свой счетчик изображений, или даже пользовательскую навигацию. По умолчанию null.
transitionIn, transitionOut - Тип переходов. Может быть установлен в 'elastic', 'fade' или 'none'. По умолчанию 'fade'.
speedIn, speedOut - Скорость перехода fade и elastic, в милисекундах. По умолчанию 300.
changeSpeed - Скорость изменения размеров при изменении элементов галереи в миллисекундах. По умолчанию 300.
changeFade - Скорость проявления контента во время смены элементов галереи. По умолчанию 'fast'.
easingIn, easingOut - Easing, используемый для эластичных анимаций. По умолчанию 'swing'.
showCloseButton - Включает/ выключает показывание кноки закрытия. По умолчанию true.
showNavArrows Включает/ выключает показывание стрелок навигации. По умолчанию true.
enableEscapeButton - Включает/ выключает закрытие FancyBox по нажатию но кнопке Esc. По умолчанию true.
onStart - Функция, вызываемая перед попыткой загрузить контент. По умолчанию null.
onCancel Функция, вызываемая после отмены загрузки. По умолчанию null.
onComplete - Функция, вызываемая один раз при отображении содержимого. По умолчанию null.
onCleanup - Функция, вызываемая как раз перед закрытием. По умолчанию null.
onClosed Функция, вызываемая один раз перед закрытием FancyBox. По умолчанию null
Ну и, собственно, результат, как говорится, на лице! Или на лицо? Та какая, блин, разница! Смотри, короче.
Всех благ тебе, удачи, здоровья и всего лучшего!
Понравилась статья?
Метки для данной статьи
Похожие статьи
Заголовок
Категория
Просмотров
Поделиться:
Последние активные темы форума
Темы | Просмотров | Ответов | Последние сообщения | |
Вопрос по переделке bb-кода PHP, MySQL |
22803 | 5 | Pisatel 26. мая 2017 |
|
Вопросы по Ajax форме обратной связи CMS PHP Fusion |
71457 | 48 | Ditrin 19. февраля 2017 |
|
BBCode YouTube Video Colorbox mod CMS PHP Fusion |
15684 | 2 | Pisatel 10. декабря 2016 |
|
Как лучше создать собственную страницу? CMS PHP Fusion |
18331 | 17 | Pisatel 11. мая 2016 |
|
Небольшие вопросы по скриптам магазина и катало... PHP, MySQL |
149695 | 80 | Pisatel 11. января 2016 |
|
BBCode Code mod CMS PHP Fusion |
14828 | 0 | Pisatel 31. августа 2015 |
|
Ajax Like Dislike Article Panel CMS PHP Fusion |
23133 | 16 | Pisatel 07. июля 2015 |
|
Хлебные крошки / BreadCrumbs SEO Panel CMS PHP Fusion |
26917 | 17 | Pisatel 04. июля 2015 |
|
Abbr Description BBCode CMS PHP Fusion |
7814 | 0 | Pisatel 15. июня 2015 |
|
Плагин Email рассылки Mail To All by Pisatel CMS PHP Fusion |
38018 | 32 | Pisatel 26. апреля 2015 |
|
Подозрительный трафик и прочие страшилки Всякая хрень |
12002 | 2 | Ditrin 23. апреля 2015 |
|
Мод Newsletter - рассылка писем пользователям с... CMS PHP Fusion |
31426 | 13 | Pisatel 10. апреля 2015 |
|
Мод отправки писем PHPMailer для PHP-Fusion CMS PHP Fusion |
132992 | 113 | Ditrin 06. апреля 2015 |
|
Появление неизвестного файла subscriptions.php CMS PHP Fusion |
8982 | 2 | Pisatel 06. апреля 2015 |
|
Autoban on IP CMS PHP Fusion |
23479 | 13 | Pisatel 03. апреля 2015 |