Офис НП AMWAY в Ярославле
Офис Амвей в Ярославле
→ На карте Офис 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: красивый вывод изображений и модальные окна
Опубликовал Pisatel Pisatel Добавлено 12-02-2013 14:37 12 Февраль 2013 14:37:32 15620 Прочтений 15620 Прочтений
Обновлено: 21-09-2015 10:09 Обновлено: 21 сентября 2015 10:09:33  printer

Красивый вывод фото и изображений


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
Ну и, собственно, результат, как говорится, на лице! Или на лицо? Та какая, блин, разница! Смотри, короче.

Всех благ тебе, удачи, здоровья и всего лучшего!
Понравилась статья?
Метки для данной статьи
Теги:  #html #js #javascript #jquery #fancybox #плагин jquery #плагин fancybox 
Похожие статьи
Заголовок
Категория
Просмотров
20473
27475
20621
6816
Поделиться:   
Последние активные темы форума
  Темы Просмотров Ответов Последние сообщения
folder Вопрос по переделке bb-кода
PHP, MySQL		 16341 5 Pisatel
26. мая 2017
folder Вопросы по Ajax форме обратной связи
CMS PHP Fusion		 40682 48 Ditrin
19. февраля 2017
folder BBCode YouTube Video Colorbox mod
CMS PHP Fusion		 12009 2 Pisatel
10. декабря 2016
folder Как лучше создать собственную страницу?
CMS PHP Fusion		 13649 17 Pisatel
11. мая 2016
folder Небольшие вопросы по скриптам магазина и катало...
PHP, MySQL		 96699 80 Pisatel
11. января 2016
folder BBCode Code mod
CMS PHP Fusion		 10477 0 Pisatel
31. августа 2015
folder Ajax Like Dislike Article Panel
CMS PHP Fusion		 16060 16 Pisatel
07. июля 2015
folder Хлебные крошки / BreadCrumbs SEO Panel
CMS PHP Fusion		 19054 17 Pisatel
04. июля 2015
folder Abbr Description BBCode
CMS PHP Fusion		 5838 0 Pisatel
15. июня 2015
folder Плагин Email рассылки Mail To All by Pisatel
CMS PHP Fusion		 27610 32 Pisatel
26. апреля 2015
folder Подозрительный трафик и прочие страшилки
Всякая хрень		 9441 2 Ditrin
23. апреля 2015
folder Мод Newsletter - рассылка писем пользователям с...
CMS PHP Fusion		 14106 13 Pisatel
10. апреля 2015
folder Мод отправки писем PHPMailer для PHP-Fusion
CMS PHP Fusion		 85560 113 Ditrin
06. апреля 2015
folder Появление неизвестного файла subscriptions.php
CMS PHP Fusion		 6942 2 Pisatel
06. апреля 2015
folder Autoban on IP
CMS PHP Fusion		 19722 13 Pisatel
03. апреля 2015