Подключение jQuery Fancybox в WordPress без плагинов, установка и настройка
Привет, ребята, давно не виделись уже, однако. Но вот он я! Сегодня решил рассказать о том, о чем меня часто спрашивают, а именно – с помощью какого плагина у меня показываются картинки на блоге? Я отвечаю – никакого плагина, исключительно ручная работа. Разумеется, за основу были взять готовые решения, которые я интегрировал в WordPress – речь идет про замечательный jQuery Fancybox.
Мне кажется, что Fancybox является более удачным и легким решением, нежели другие общепризнанные решения типа Lightbox. Не буду вдаваться в подробности и рассказывать почему, просто я так считаю и этого достаточно. И сегодня я вам расскажу, как очень быстро и легко подключить Fancybox в WordPress, а так же как его настроить.
Самое приятное в моем решении то, что не придется вносить никаких изменений в существующие и будущие посты блога, вся необходимая информация будет браться из существующих данных, а настройки вывода и отображения меняются в самом JavaScript коде вызова.
Кстати, процесс подключения очень похож на установку формы обратной связи на jQuery, о которой я однажды рассказывал, и которая вам очень понравилась.
Перед началом наших работ предлагаю позыркать на тёлочек, да и как же без сисек да в пятницу ^_^ Вам же такое нравится, да? Вы не подумайте чего, это я фотографию выкладываю для того, чтобы посмотреть живой пример работы Fancybox’а. Кстати, эта моя фотография, сделанная в самом мажорном клубе города Иркутска, я был там фотографом, и выкладывать фото оттуда запрещено, но для вас я рискую.
Скачать Fancуbox (дистрибутив версии 1.3.4)
За основу я брал актуальный на то время (время, когда я интегрировал данное решение на свой блог) архив jquery fancybox 1.3.4 – с ним мы и будем работать.
Сразу отвечу на возможный вопрос – А почему не fancyBox version 2? – Да, вторая версия более крутая, легкая и быстрая, но в ней убраны как раз те функции, без которых не получится интегрировать скрипт без внесения изменений в каждый пост на блоге. Поэтому будем пользоваться хоть и более старой, но надежной версией 1.3.4.
Итак, мы скачали и распаковали архив себе на компьютер в папку jquery.fancybox-1.3.4
Внутри обозначенной папки есть еще одна папка под названием fancybox – ее надо залить на сервер, например, в папку с плагинами /wp-content/plugins/. Таким образом, нужное нам содержимое должно очутиться тут site.ru/wp-content/plugins/fancybox
Открываем редактор шаблона в админке и файл functions.php, в самое начало, например, добавляем следующие строки:
function my_css(){echo'<link rel="stylesheet" type="text/css" href="http://site.ru/wp-content/plugins/fancybox/jquery.fancybox-1.3.4.css" media="screen" />'."\n";}
add_action('wp_head','my_css',5);if(!is_admin()){
wp_enqueue_script('fancybox','/wp-content/plugins/fancybox/jquery.fancybox-1.3.4.js','jquery','1.3.4');}
Первой функцией мы добавляем в шаблон сайта css файл стилей, а функцией wp_enqueue_script (); мы безопасно добавляем сам js-скрипт fancybox, таким образом, чтобы он обязательно шел после подключенного основного jQuery.
Открываем в редакторе шаблона файл header.php и сразу перед </head> добавляем следующий js-код вызова:
Чистим кеш и перезагружаем любую страницу блога с картинками — наслаждаемся видами ;)
Настройка Fancybox и параметры
Самое сложное во всем этом безобразии это пункт номер 4. К его такому виду я пришел спустя месяц, после первой интеграции. Все гениальное не так и просто, как кажется :)
‘a[href^=»http://site.ru/wp-content/uploads/»]:has (img)’ – этот код ограничивает применение вызова fancybox только на картинки и только те, которые загружены в директорию /wp-content/uploads/ блога, то есть это как раз картики, которые мы добавляем к постам. Без этого кода в модельном окне начинают открываться любые картинки присутствующие на сайте, в том числе и счетчики, и элементы дизайна, и все что угодно.
‘hideOnContentClick’:true – данный код активирует функцию закрытия всплывающего окна по клику. Без этого кода закрыть окно можно будет только нажав на крестик в правом верхнем углу открывшегося изображения, что, разумеется, очень неудобно и нелогично.
‘titleFromAlt’:true – как раз та функция, которой нас лишили в fancybox2 – функция, которая берет из атрибута alt картинки текст и показывает его как пояснение в модальном окне.
‘titlePosition’:’outside’ – функция определяющая положение поясняющего текста, в данном случае это под картинкой. Может принимать значения ‘outside’, ‘inside’ или ‘over’ – проверьте каждый вариант и выберите понравившийся.
‘padding’:’5′ – отступ изнутри, говоря более понятно, то эта настройка определяет ширину рамки.
‘margin’:’25’ – отступ извне, определяет отступы модального окна от границ видимого пространства в браузере.
Остальные параметры fancybox и их настройки вы можете подсмотреть на официальном сайте — fancybox.net/api — так же там описаны API методы, но я не уверен, что они вам пригодятся, но мало ли…
Ну вот, дорогие друзья, в целом и все, как установить и как настроить я вам рассказал, результат вы можете подстроить для своего сайта, как вам захочется, это не сложно.
Будьте на связи, задавайте вопросы, оставляйте комментарии.