Fancybox: подключение к странице сайта.

Рекомендую хостинг которым я пользуюсь

Hosting Ukraine
Fancybox: подключение скрипта к странице сайта

FancyBox - это очень интересный инструмент, который предлагает приятный и элегантный способ добавления функции открытия во всплывающих окнах изображений, html-страниц и мультимедийных данных, таких как видео из различных сервисов, флешь ролики и прочие варианты. Построен данный инструмент на базе мега популярной библиотеке для JavaScript, а именно всем известном JQuery. К неоспоримым достоинствам нужно в первую очередь отнести простоту подключения и настройки данного инструмента.

Маленький видео-обзор Fancybox

В данном посте мы будем рассматривать последнюю на момент публикации версию этого замечательного инструмента Fancybox 2.

Что нового в Fancybox 2?

И так что нового было добавлено в этот релиз за последнее время:

  1. Расширен набор вспомогательных функций;
  2. Отзывчивость (всплывающие окошки теперь масштабируются в зависимости от размера окна браузера);
  3. Добавлено слайдшоу;
  4. Новые эффекты переходов между изображениями в галерее;
  5. Fancybox полностью переведен на CSS3 (тени, скругление углов и прочее);
  6. Обновлен плагин настроек (не имеет обратной совместимости);
  7. Теперь выпускается под лицензией Creative Commons Attribution-NonCommercial 3.0, ознакомится с которой можно по этой ссылке: http://creativecommons.org/licenses/by-nc/3.0/

Пример использования новой версии Fancybox 2 вы можете посмотреть по ссылке: https://webors.in.ua/fancybox/demo/

Подключение Fancybox к странице сайта

Скачайте архив с плагином, распакуйте его, скопируйте все файлы, включая сценарии js и файлы стилей css в папку на вашем сервер.

Fancybox 2.1.5

 Можете сразу же для порядка разместить файлы в зависимости от типа по соответствующим папкам (файлы css в папку styles, файлы js в папку javascripts), но помните что если вы это сделаете, то вам нужно будет убедиться, что пути в CSS файлах к скриптам и пути в файлах JS к фалам стилей соответствуют новому их расположению на вашем сервере. Так же не забудьте подключить к странице последнюю версию библиотеки JQuery (на момент написания поста это версия 2.1.1)

Пример:

далее создаем ссылки, которые будут вести на элементы, которые мы собираемся открыть с помощью Fancybox (за каламбур прошу простить 😉  )

Вызывать Fancybox следует только после загрузки страницы как показано ниже. Если вы не знакомы с JQuery, то вам нужно получить хотя бы минимальные знания. Соответствующие курсы можно спокойно найти в интернете.

В следующих постах мы на примерах рассмотрим различные варианты использования Fancybox на страницах вашего сайта.

Друзья,
напишите в комментариях стоит ли мне
записать и выложить видео по подключению
данного скрипта как я это сделал тут:

Подключение Lightbox к странице сайта

Свою благодарность автору статьи вы можете выразить просто кликнув в нужном месте на странице 🙂

автор: Руслан Овчинников
Оценка: 1Оценка: 2Оценка: 3Оценка: 4Оценка: 5 (8 оценок, в среднем: 4,63 из 5)
Загрузка...