Формируем всплывающее окно для портфолио – урок 28

Продолжим разработку нашего портфолио и в этом уроке я нашел неплохой скрипт всплывающего окна, попробуем его использовать. Скрипт называется Responsive Lightbox Plugin.

Для использования скрипта необходимо вначале подключить его стили в шапке сайта и затем можно в футер сайта подключать сам скрипт. Подробнее о том как это делается давайте посмотрим ниже.

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

Заливаем скрипт в папку wp-content/themes/my_theme_tmp/js/responsive-lightbox-master/.

Далее нам надо подключить скрипт и для его правильного подключения мы можем воспользоваться уже знакомым файлом custom-header-script.php, находиться он по адресу wp-content/themes/my_theme_tmp/functions/custom-header-script.php.

Подключаем скрипт и стили в имеющийся код функции my_scripts_method

Скрипт подключается при помощи кода:

Полный листинг функции my_scripts_method:

Подключаем стили ниже в функции.

Полный листинг функции add_my_stylesheet:

После подключения скрипта и стилей мы можем посмотреть на результат. Если все было сделано правильно, то на странице sitemame/portfolio/ в коде появится подключенный скрипт, а также новый файл стилей.

Файл стилей jquery.lightbox.min.css

Файл скрипта  jquery.lightbox.js

После успешного подключения необходимо добавить произвольные размеры изображений, поправить шаблон портфолио в файле archive-my_works.php и указать при клике на какие элементы будет отображаться картинка в большом формате, во всплывающем окне.

1. Зайдем в functions.php и найдем код.

Дополним код новым размером изображения для страницы портфолио:

2. Зайдем в шаблон archive-my_works.php и найдем в нем код:

<img src=»‘.$thymbUrl.'» alt=»» />

Необходимо изменить код для вывода правильного размера изображения.

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

Внимание, может быть проблема и выводом правильного размера миниатюры, но ее легко решить.

Если у вас картинка не поменяла размер как ожидалось, то скорее всего необходимо пересоздать миниатюры портфолио при помощи одного из плагинов Regenerate Thumbnails или Force Regenerate Thumbnails. После запуска активации плагина, запустите его работу и обязательно дождитесь окончания.

Теперь когда все работает, можно дорабатывать вывод изображений во всплывающем окне. Для вывода всплывающего окна необходимо правильно прописать элемент, при клике на который будет поверх появляться картинка.

Добавляем код в файл footer.php, как показано ниже.

Из выше указанного видно, что картинки будут появляться во всплывающем окне в том случаи когда в теге будет атрибут rel=»lightbox». Давайте сделаем так чтобы во всех картинок которые ссылаются на свой больший вариант этот атрибут появился. Для этого зайдите в файл functions.php и добавьте в него код специального фильтра:

После всех манипуляций у меня получилась вот такая галерея.

создание портфолио wrdpress

Файлы темы из этого урока

zip wordpress theme archive


Купить хостинг WordPress
Репетитор по wordpress
Услуги репетитора онлайн. Список курсов которые я веду
  • Базовый курс по веб-дизайну;
  • Верстка сайтов;
  • Общий курс по CMS WordPress и продолжение курса по разработке шаблонов;
  • Разработка сайтов на PHP.
Подробнее читайте на странице репетитор по WordPress
*/

Николаенко Максим

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


Вам может также понравиться...

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

Шаблоны для WordPress
Самый лучший хостинг в Украине
Стабильный хостинг для Drupal