Функции 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

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