Офис НП 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 
12 Февраль 2013 14:37:32
17854 Прочтений
Обновлено: 21 сентября 2015 10:09:33
Красивый вывод фото и изображений
FancyBox является прекрасной, а я бы даже сказал- лучшей, альтернативой ColorBox. Для начала мы идем сюда, и качаем JQuery FancyBox v2.1.4. Не буду рассусоливать, переходим сразу к установке( не забудьте только архив распаковать).
Подключение:
Код: HTML5
1 2 3 4 5 6 7 8 9 10 11 12 | <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
1 | <a class='fancybox' rel='group' title='Описание изображения, которое будет выведено' href='url_изображения'><img src='url_превью'></a> |
Идентификатор rel='group' задает параметр вывода всех изображений на странице для перехода между ними. То есть, если мы его исключим, изображения будут показываться одиночно, без листания.
Атрибут title в url ссылки задает описание изображения, которое будет выведено под самим изображением. Смотрится весьма неплохо. А самое главное- минимум изменений в самом коде- за что я и люблю этот плагин.
Модальные всплывающие окна HTML
Все так же довольно просто. Например, всплывающая подсказка будет выглядеть примерно так:
Код: HTML
1 2 | <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
Ну и, собственно, результат, как говорится, на лице! Или на лицо? Та какая, блин, разница! Смотри, короче.
Всех благ тебе, удачи, здоровья и всего лучшего!
Понравилась статья?
Метки для данной статьи
Похожие статьи
Заголовок
Категория
Просмотров
Поделиться:
Последние активные темы форума
| Темы | Просмотров | Ответов | Последние сообщения |
