Привет, ребята, давно не виделись уже, однако. Но вот он я! Сегодня решил рассказать о том, о чем меня часто спрашивают, а именно – с помощью какого плагина у меня показываются картинки на блоге? Я отвечаю – никакого плагина, исключительно ручная работа. Разумеется, за основу были взять готовые решения, которые я интегрировал в WordPress – речь идет про замечательный jQuery Fancybox.
Мне кажется, что Fancybox является более удачным и легким решением, нежели другие общепризнанные решения типа Lightbox. Не буду вдаваться в подробности и рассказывать почему, просто я так считаю и этого достаточно. И сегодня я вам расскажу, как очень быстро и легко подключить Fancybox в WordPress, а так же как его настроить.
Самое приятное в моем решении то, что не придется вносить никаких изменений в существующие и будущие посты блога, вся необходимая информация будет браться из существующих данных, а настройки вывода и отображения меняются в самом JavaScript коде вызова.
Кстати, процесс подключения очень похож на установку , о которой я однажды рассказывал, и которая вам очень понравилась.
Перед началом наших работ предлагаю позыркать на тёлочек, да и как же без сисек да в пятницу ^_^ Вам же такое нравится, да?
Вы не подумайте чего, это я фотографию выкладываю для того, чтобы посмотреть живой пример работы Fancybox’а. Кстати, эта моя фотография, сделанная в самом мажорном клубе города Иркутска, я был там фотографом, и выкладывать фото оттуда запрещено, но для вас я рискую.
Скачать Fancуbox (дистрибутив версии 1.3.4)
За основу я брал актуальный на то время (время, когда я интегрировал данное решение на свой блог) архив jquery fancybox 1.3.4 – с ним мы и будем работать.
Сразу отвечу на возможный вопрос – А почему не fancyBox version 2? – Да, вторая версия более крутая, легкая и быстрая, но в ней убраны как раз те функции, без которых не получится интегрировать скрипт без внесения изменений в каждый пост на блоге. Поэтому будем пользоваться хоть и более старой, но надежной версией 1.3.4.
Скачать
Установка Fancybox и подключение
- Итак, мы скачали и распаковали архив себе на компьютер в папку 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-код вызова:
<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>
- Чистим кеш и перезагружаем любую страницу блога с картинками — наслаждаемся видами 😉
Настройка 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 и их настройки вы можете подсмотреть на официальном сайте — — так же там описаны API методы, но я не уверен, что они вам пригодятся, но мало ли…
Ну вот, дорогие друзья, в целом и все, как установить и как настроить я вам рассказал, результат вы можете подстроить для своего сайта, как вам захочется, это не сложно.
Будьте на связи, задавайте вопросы, оставляйте комментарии.
