Функции WordPress

Подключение jQuery Fancybox в WordPress без плагинов, установка и настройка

jQuery Fancybox для WordPress Привет, ребята, давно не виделись уже, однако. Но вот он я! Сегодня решил рассказать о том, о чем меня часто спрашивают, а именно – с помощью какого плагина у меня показываются картинки на блоге? Я отвечаю – никакого плагина, исключительно ручная работа. Разумеется, за основу были взять готовые решения, которые я интегрировал в WordPress – речь идет про замечательный jQuery Fancybox.

Мне кажется, что Fancybox является более удачным и легким решением, нежели другие общепризнанные решения типа Lightbox. Не буду вдаваться в подробности и рассказывать почему, просто я так считаю и этого достаточно. И сегодня я вам расскажу, как очень быстро и легко подключить Fancybox в WordPress, а так же как его настроить.

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

Кстати, процесс подключения очень похож на установку формы обратной связи на jQuery, о которой я однажды рассказывал, и которая вам очень понравилась.

Перед началом наших работ предлагаю позыркать на тёлочек, да и как же без сисек да в пятницу ^_^ Вам же такое нравится, да?
Вы не подумайте чего, это я фотографию выкладываю для того, чтобы посмотреть живой пример работы Fancybox’а. Кстати, эта моя фотография, сделанная в самом мажорном клубе города Иркутска, я был там фотографом, и выкладывать фото оттуда запрещено, но для вас я рискую.

Тёлочки, сиськи и Fancybox

Скачать Fancуbox (дистрибутив версии 1.3.4)

За основу я брал актуальный на то время (время, когда я интегрировал данное решение на свой блог) архив jquery fancybox 1.3.4 – с ним мы и будем работать.

Сразу отвечу на возможный вопрос – А почему не fancyBox version 2? – Да, вторая версия более крутая, легкая и быстрая, но в ней убраны как раз те функции, без которых не получится интегрировать скрипт без внесения изменений в каждый пост на блоге. Поэтому будем пользоваться хоть и более старой, но надежной версией 1.3.4.

Скачать jquery.fancybox-1.3.4.zip

Установка Fancybox и подключение

  1. Итак, мы скачали и распаковали архив себе на компьютер в папку jquery.fancybox-1.3.4
  2. Внутри обозначенной папки есть еще одна папка под названием fancybox – ее надо залить на сервер, например, в папку с плагинами /wp-content/plugins/. Таким образом, нужное нам содержимое должно очутиться тут site.ru/wp-content/plugins/fancybox
  3. Открываем редактор шаблона в админке и файл 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.

  4. Открываем в редакторе шаблона файл header.php и сразу перед </head> добавляем следующий js-код вызова:
    <script type="text/javascript">$(document).ready(function(){$('a[href^="http://site.ru/wp-content/uploads/"]:has(img)').fancybox({'hideOnContentClick':true,'titleFromAlt':true,'titlePosition':'outside','padding':'5','margin':'25'});});</script>
  5. Чистим кеш и перезагружаем любую страницу блога с картинками — наслаждаемся видами 😉

Настройка 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 методы, но я не уверен, что они вам пригодятся, но мало ли…

Ну вот, дорогие друзья, в целом и все, как установить и как настроить я вам рассказал, результат вы можете подстроить для своего сайта, как вам захочется, это не сложно.

Будьте на связи, задавайте вопросы, оставляйте комментарии.

Похожие статьи

Кнопка «Наверх»
Закрыть

Обнаружен Adblock

Пожалуйста, подумайте о том, чтобы поддержать нас, отключив свой блокировщик рекламы!