Подключение 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="https://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 методы, но я не уверен, что они вам пригодятся, но мало ли…

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

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

Александр «АлаичЪ» Алаев
Александр «АлаичЪ» Алаев

Вот уже 18 лет я профессионально занимаюсь созданием и продвижением сайтов и 13 лет с удовольствием пишу в любимый блог. Создал заслужившие доверие в seo-сообществе программы FastTrust и ComparseR и известный сервис для проверки траста сайтов CheckTrust.ru.

В 2014 основал веб-студию «АлаичЪ и Ко» в Краснодаре: 1 место в рейтинге агентств интернет-маркетинга (Рейтинг Рунета), 2 место в рейтинге SEO-компаний (CMSmagazine), 12 место в рейтинге известность бренда SEO-компаний в России (SeoNews).

Выступаю на профильных конференциях (All In Top, SEO Conference, SEMPRO, Baltic Digital Days). Веду канал в telegram про seo и бизнес. SEO-специалист года 2019 и 2020 (Sape).

Ерунда и баянЪ!Зачет! Плюсую!
+11

Профессиональный технический аудит и рекомендации по оптимизации вашего сайта.
Тот самый необходимый «фундамент» для успешного продвижения.

30 000 руб.

Комплексный подход к решению поставленных задач: достижение топ-10 и увеличение трафика на сайт. В стоимость уже включены полный технический аудит и оптимизация сайта.

45 000 руб.

У вас недостаточно знаний и нужны ответы на вопросы?
Интересует мнение эксперта или надо проверить подрядчика?
Вы задаете вопрос — я отвечаю!

5 000 руб./час

Проведу подробное исследование вашего сайта и основных конкурентов, опубликую материал на блоге для обсуждения и коллективного поиска новых идей.

70 000 руб.

Я начал запись своего обучающего курса по seo-продвижению.

В каждом видео я разбираю какую-то одну важную тему, и делаю это последовательно, в порядке, подходящем для изучения с нуля. Видео выкладываются раз в неделю – по средам. Я думаю, весь курс будет состоять из 50-70 роликов, так до конца еще далеко, а значит самое время подписаться и начать изучение вместе со мной.

В блоке слева всегда будет выводиться самое свежее видео курса. Ссылки: на мой канал, на плейлист обучения.

Комментарии: 49 Написать комментарий
  1. Дмитрий (4 комм.)

    Спасибо за телочек:) Как раз для пятницы:) Ну а за пост, как всегда, респект!

    Ответить
  2. Plazik (5 комм.)

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

    Какие именно? Не вижу проблем и в интеграции второй версии без плагина. На каком из четырех пунктов были проблемы? Вторая версия намного лучше, например там все картинки вынесены в спрайты.

    Ответить
    • АлаичЪ

      Во второй версии я не смог выдрать текст из альта, чтобы добавить его в описание картинки. Если вы нашил как это сделать, я буду рад это услышать, и даже пост обновлю.

      Ответить
  3. DeKum (3 комм.)

    Телки страшненькие, как под ботексом...

    А пост информативен.

    Ответить
  4. Максим (1 комм.)

    Вроде все доступно и понятно написано, да и я не новичок. Но почему-то не получилось.

    Просто все осталось как было. Может что-то важно упустил? А зачем остальные файлы в папке были? С ними ничего не надо делать?

    Ответить
    • АлаичЪ

      А что не получилось-то? Я же не ясновидящий ;)

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

      Ответить
  5. НКС (4 комм.)

    У меня вот такой вопрос — тоже подключаю без плагинов на вордпресс, по сути точно так же, хочу повесить внутрь форму обратной связи, причем пробую использовать плагин contact form 7 (он стоял ещё до подключения фэнсибокса) с открытием как inline.

    Открывает корректно, но после нажатия отправки письма, страница перезагружается и окно закрывается, а должно оставаться с сообщением (ваше письмо отправлено, или предупреждения, что какие-то поля не заполнены).

    В общем если есть мысли, или кто-то уже делал контактную форму в окне фэнсибокс, поделитесь опытом, пожалуйста.

    Ответить
    • АлаичЪ

      Если страница перезагружается, то модальное окно, разумеется, не откроется само после этого.

      Ответить
      • НКС (4 комм.)

        Я понимаю, контактная форма перезагружает страницу при нажатии на кнопку отправить, думал может быть можно как-то этот момент отследить и исправить.

        А пока что сделал так: создал шаблон под контактную форму (просто с выводом контента), и сделал страницу в админке, куда поместил шорт код от contact form 7, и теперь эту страницу открываю через iframe fancybox! В принципе работает...

        Ответить
      • НКС (4 комм.)

        Извиняюсь за сказанные вероятно мной глупости сейчас, или в будующем, буквально два месяца назад начал изучать эту тему.

        Возникли ещё определенные трудности, а именно в настройке iframe. Хотел замедлить появление, чтобы успел подгружаться контент и появлялся сразу в окне, и просто изменить размеры модального окна. Но почему то не все настройки срабатывают.

        Вот код в хидере у меня:

        <script type="text/javascript">
        	jQuery (document).ready (function () {
         
        		jQuery ("a.iframe").fancybox (
        			{
        				"imageScale" : false,
        				"zoomOpacity" : false,
        				"zoomSpeedIn" : 10000,
        				"zoomSpeedOut" : 10000,
        				"zoomSpeedChange" : 1000,
        				"frameWidth" : 700,
        				"frameHeight" : 600,
        				"centerOnScroll" : true,
        			});
        	});
        </script>

        Из всего этого срабатывает только "centerOnScroll" : true.

        Ответить
        • АлаичЪ

          А попробуйте те же настройки изменить в самом исходном файле jquery.fancybox.js и тогда видно будет, где кроется проблема, или в коде вызова, или что-то принципиально делается не правильно.

          Ответить
          • НКС (4 комм.)

            Спасибо за совет, пробовал изменить в jquery.fancybox-1.3.4.js, ничего не изменилось.

            Код вызывающий iframe на странице имеет такой вид

            <a class="iframe" href="мойсайт/страница сайта с контактной формой">Написать письмо</a>

            Ответить
            • АлаичЪ

              Попробуйте такой код использовать:

              <script type="text/javascript">$(document).ready(function(){$('a.iframe').fancybox({'imageScale':false,'zoomOpacity':false,'zoomSpeedIn':'10000','zoomSpeedOut':'10000','zoomSpeedChange':'1000','frameWidth':'700','frameHeight':'600','centerOnScroll':true});});</script>

              Если не сработает, то я даже не знаю :(

              Ответить
  6. Роман (2 комм.)

    АлаичЪ, может вы знаете решение. Как в фэнси, в развернутой картинке дополнительно к описанию добавить ссылку на эту же картинку? Т.е. есть картинки большого разрешения и чтобы их рассмотреть нужно открыть ее в новом окне 1:1. Сейчас у меня получается одни картинки идут через фэнси, а другие (большие) открываются в новом окне, что не очень удобно.

    Ответить
    • АлаичЪ

      Я думал об этом, но как сделать не знаю :(

      Ответить
      • Роман (2 комм.)

        Во 2-й версии такая возможность есть по умолчанию, но нужно именно в 1.3.4. Если найду решение — поделюсь :)

        Ответить
        • АлаичЪ

          Хорошо, было бы полезно, как мне так и читателям!

          Ответить
  7. snegovik (7 комм.)

    У меня не работает. Всё сделал как написано, но всё осталось по прежнему, картинки открываються в новом окне.

    Ответить
    • АлаичЪ

      И что? Что я должен ответить на такой комментарий?

      Ответить
      • snegovik (7 комм.)

        Да, впринципе, наверное и правда, что тут ответишь. Не работает, ну и ладно. Может я что накосячил, хотя что тут можно накосячить.

        Ответить
  8. factotum (1 комм.)

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

    Интеграция fancybox 2 (defer loading):

    (function (){function a (a,b){var c=document.createElement ("script");c.src=a;var d=document.getElementsByTagName ("head")[0],e=false;c.onload=c.onreadystatechange=function (){if (!e&&(!this.readyState||this.readyState=="loaded"||this.readyState=="complete")){e=true;b ();c.onload=c.onreadystatechange=null;d.removeChild©}};d.appendChild©}a ("http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js",function (){a ("http://cdn.hw-lab.com/fancybox2/jquery.fancybox.pack.js?ver=2.0.6",function (){jQuery (function (){jQuery.fn.getTitle=function (){var a=jQuery ("a.fancybox");jQuery.each (a,function (){var a=jQuery (this).children ("img").attr ("alt");jQuery (this).attr ("title",a)})};var a=jQuery ("a:has (img)").not (".nolightbox").filter (function (){return/.(jpe?g|png|gif|bmp)$/i.test (jQuery (this).attr ("href"))});a.addClass ("fancybox").attr ("rel","fancybox").getTitle ();jQuery ("a.fancybox").fancybox ({cyclic:false,autoScale:true,padding:10,opacity:true,speedIn:500,speedOut:500,changeSpeed:300,overlayShow:true,overlayOpacity:"0.6",overlayColor:"#666666",titleShow:true,titlePosition:"float",enableEscapeButton:true,showCloseButton:true,showNavArrows:true,hideOnOverlayClick:true,hideOnContentClick:false,width:560,height:340,transitionIn:"fade",transitionOut:"fade",centerOnScroll:true})})})})})()

    Пример работы на моей домашней странице (скрипт загружается для записей, на главной он не нужен).

    Ответить
  9. Владимир (17 комм.)

    Все сделал по инструкции, но при клике на картинку открывается страница site.ru/wp-content/uploads/2012/07/11.jpg

    Сайт на Денвере.

    WordPress Версия 3.4.1 от Lecactus.

    Ответить
    • Владимир (17 комм.)

      Все работает. Но теперь нужно сделать что бы миниатюра записи на странице полной записи по клику открывалась как и остальные (на данный момент ничего не происходит)

      Ответить
      • АлаичЪ

        Любые картинки внутри ссылки должны и будут открываться в fancybox'е и не важно, миниатюра это или что-то другое. Но если нет ссылки, нет фансибокса!

        Ответить
  10. X-only (13 комм.)

    Трудновато разобраться конечно, но как не крути, но что-то у меня всё таки не получается... Может я кривой или руки)?

    Ответить
  11. Lavina (2 комм.)

    Интегрирую в битрикс, но не fancyBox, а litebox. Так вот. Там в детальном просмотре присутствуют кнопки в виде картинок gif , которые после интеграции не отображаются. Т.е. — изображения листаются (ссылка присутствует), но кнопок next и prew нет. тоже самой с кнопкой закрыть — на ее месте пусто, хотя закрытие происходит.

    Пардон, если не в тему (обсуждается все же fancyBox), но если кто подскажет, в чем дело — буду благодарен.

    Ответить
    • АлаичЪ

      Проверьте правильность пути (ссылки) к картинкам, скорее всего дело в этом.

      Ответить
      • Lavina (2 комм.)

        Спасибо за подсказку. Дело действительно было в этом.

        Но в css путей нет, а изменения в самом скрипте нечего не дали.

        Поэтому решил проблему переносом папки с картинками интерфейса в корень сайта (до этого были в папке шаблона). И вуаля — все заработало :)

        Ответить
  12. uradvd (1 комм.)
    // Fancybox
    function fancybox_css () {
    	if (is_singular ()){
    	//echo '<link rel="stylesheet" type="text/css" href="/wp-content/themes/bp-default/_inc/fancybox/jquery.fancybox.css" media="screen" />'."n";
    	wp_register_style ( 'fancybox-style', get_template_directory_uri () . '/_inc/fancybox/jquery.fancybox.css', array (), '20120925', 'all' );
    	wp_enqueue_style ( 'fancybox-style' );
    	}
    	}
    //add_action ('wp_head', 'my_css', 25);
    add_action ( 'wp_print_styles', 'fancybox_css' );

    Правильней будет так сделать для css, могу быть проблемы с кеширующими плагинами типо total cache, у меня например были=)

    Ответить
  13. Александр (3 комм.)

    Добрый день. Подскажите пожалуйста, на сайте залогиненым пользователям галерея отображается нормально, а незалогиненым открывает не в Fancybox, а просто картинку на чистом окне. Сам Fancybox у меня был установлен вместе с темой. Причем на сайте темы всё нормально работает и логиниться не нужно. Подозреваю что это мои корявые ручки что-то испортили. Где вообще искать причину можно?

    function hatch_scripts() {
     
    	if ( !is_admin() ) {
     
    		/* Enqueue Scripts */		
    		wp_register_script ( 'hatch_fancybox', get_template_directory_uri () . '/js/fancybox/jquery.fancybox-1.3.4.pack.js', array ( 'jquery' ), '1.0', true );
    		wp_enqueue_script ( 'hatch_fancybox' );
     
    		wp_register_script ( 'hatch_fitvids', get_template_directory_uri () . '/js/fitvids/jquery.fitvids.js', array ( 'jquery' ), '1.0', true );
    		wp_enqueue_script ( 'hatch_fitvids' );
     
    		wp_register_script ( 'hatch_footer-scripts', get_template_directory_uri () . '/js/footer-scripts.js', array ( 'jquery', 'hatch_fitvids', 'hatch_fancybox' ), '1.0', true );
    		wp_enqueue_script ( 'hatch_footer-scripts' );
    		/* Enqueue Styles */
     
    		wp_enqueue_style ( 'hatch_fancybox-stylesheet', get_template_directory_uri () . '/js/fancybox/jquery.fancybox-1.3.4.css', false, 1.0, 'screen' );	
    	}
    Ответить
    • АлаичЪ

      Проверьте, везде ли (для залогиненых и не залогиненых) подключаются все нужные скрипты в <head>.

      Ответить
      • Александр (3 комм.)

        К сожалению, мои познания в этом очень ограниченны.

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

        Ответить
        • Александр (3 комм.)

          Вопрос решен. Оказалось что конфликтует с плагинами, ибо чистый сайт без плагинов работал нормально. Методом исключения оказалось что причина в плагине loginza, чтоб логиниться с социальных сетей.

          Отключил его и всё работает как прежде :)

          Ответить
          • АлаичЪ

            Вот и отлично. А конфликты часто возможны, так как разные плагины могут подключать свои библиотеки, которые могут конфликтовать с другими.

            Ответить
  14. Дмитрий (2 комм.)

    3дравствуйте,Александр

    я начинающий вебмастер,очень хотелось бы спросить у более продвинутых спецов по JQuery,

    можно ли вставить такую выпадающую менюшку с фоткой (JQuery),вот как тут http://playstudio.ru/ -на вордпресс?

    Ответить
    • АлаичЪ

      Все можно вставить куда угодно. Поищите в сети всякие jQuery фишки, это одна из таких фишек. Как потом это встроить на сайт обычно на сайтах источниках написано.

      Ответить
      • Дмитрий (2 комм.)

        да,вы правы-гугль знает всё

        спасибо вам

        Ответить
  15. Саша (1 комм.)

    АлаичЪ, вот в новость вставили изображений, ведущие на страницу вложений изображений к новости. У меня отображается 1 изображение на странице, как сделать что бы отображалось как у тебя по центру просматриваемое, а слева и справа, следующее и предыдущие изображение соответственно. Или вывести все сразу на странице атачмент но уменьшенные.

    Ответить
    • АлаичЪ

      Это надо другой скрипт смотреть. Может быть и в новой версии FancyBox такое есть, я не в курсе.

      Ответить
  16. Руслан (1 комм.)

    У меня что-то ничего не получилось, вроде сделал все как написано но не работает, может кто нибудь подсказать что я сделал не так?

    Ответить
  17. Александр (1 комм.)

    Добрый вечер!

    Помогите пжл новичку, я уже опустил руки.

    Собственно делаю все по инструкции, ничего не меняется. Так же пытался сделать кнопочку наверх — та же история. У меня подозрение, что не подключен jquery. Как это можно проверить?

    Заранее спасибо!

    Ответить
  18. Евгений (1 комм.)

    Спасибо за статью.

    Помогите, пожалуйста, с проблемой: использую FancyBox2. На главной странице плагин работает как положено. При переходе на отдельную запись, картинка открывается не по центру ( съезжает вниз ) и в полном размере. В качестве примера ссылка — http://ceramika.org.ua/kote-s-8-marta/ — нажмите на картинку. Заранее благодарен за помощь.

    Ответить
  19. Алекс (45 комм.)

    Да, тоже не получилось, открываются картинки в новых страницах. Может,на новых версиях вордпресса не идет?

    Буду искать плагин.

    Ответить
  20. Станислав (3 комм.)

    Доброе время суток.

    Подскажите возникла проблема с Fancybox перестали открыватся модульные окна т.е сейчас они открываются во все окно. А в админке VirtueMart в медиа файлах, когда нажимаешь на картинку оно работает. Вот сайт где проблема http://zolotayaverba.ru/

    Ответить
    • АлаичЪ

      У вас там библиотека jQuery подключается как минимум аж 3 раза, что является ошибкой и не только относительно Fancybox, но вообще из-за этого много перестает работать. Оставьте только одно подключение и все будет окей.

      Ответить
      • Станислав (3 комм.)

        Можете подсказать где отключить лишние? А то я в это профан. Спасибо.

        Ответить
        • АлаичЪ

          Понятия не имею. Спрашивайте у специалистов по Joomla.

          Ответить
          • Станислав (3 комм.)

            А как вы узнали что подключено так много библиотек?

            Ответить
Нажмите, чтобы отменить ответ.