Как сделать всплывающие изображения в WordPress без плагина

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

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

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

В то же время некоторые другие картинки не полностью помещаются в рамки контейнера под контент. Этот контейнер из-за сайдбара (боковой панели) явно ограничен в ширину. А на некоторых блогах, я бы сказал, даже ОЧЕНЬ ограничен. А так в контейнере можно показать уменьшенное изображение (превьюху), а при клике на него открыть полное большое изображение, которое будет шире контейнера и нависать над сайдбаром (или над двумя). Даже можно сделать картинку на всю ширину страницы. Это уже на ваше усмотрение.

изображения-во-всплывающих-окнах

Пример. Кликни на него!

Еще одна причина, почему лучше сделать, чтобы картинки открывались на полный размер при клике – это сами клики. Если вы хоть немного интересовались SEO, то слышали про поведенческий фактор. То есть поисковикам нравится, когда пользователи сайта ведут себя активно на нем. Вот мы и предоставим им возможность лишний раз сделать клик. И им удобней и нам (вебмастерам) выгодно. Все в выигрыше.

Подготовка изображений к открытию по клику

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

  1. Кнопка «Добавить медиафайл».
  2. Вкладка «Загрузить медиафайл».
  3. Кнопка «Вставить в запись».

А потом уже на странице мы регулируем размер картинки, если она сильно большая. Выравниваем ее посередине или сбоку. Ну, может быть, еще подписываем. Всё!

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

  1. Кнопка «Добавить медиафайл».
  2. Вкладка «Загрузить медиафайл».
  3. Кнопка «Вставить в запись».
  4. Клик на изображение, клик на кнопку «Изменить» (карандашик).
  5. В поле ссылка в выпадающем списке выбираем «Медиафайл».

Как сделать, чтобы изображения и картинки открывались во всплывающем окне

Смотрите, что мы сделали. Мы сказали Вордпрессу, чтобы он обернул эту картинку в ссылку (тег <a></a>). И ссылка эта ссылается на нашу картинку в полном размере. Теперь даже если мы вставим в статью уменьшенную картинку, то при клике на нее у нас откроется большая картинка. Только откроется она не так, как вы ожидаете. В окне браузера не останется ничего от вашего сайта, кроме этой картинки. И пользователю придется нажимать на кнопку браузера «назад», чтобы продолжить чтение статьи.

Временно (пока мы не взялись за код) мы можем это пофиксить, если поставим галочку «Открывать в новой вкладке» (смотрите на скриншоте сверху). Таким образом, мы добавим нашей ссылке атрибут «target» со значением «_blank» и наша картинка откроется в новой вкладке браузера, не заменив собой вкладку с читаемой статьей. Ну вот, стало немного удобней для пользователя – и картинку полную можно посмотреть, и статья никуда не пропадает. Круто. Но это еще не все.

Всплывающие изображения в Вордпресс без плагина

Теперь давайте приступим к самой интересной части – к написанию кода. Он у меня, естественно уже написан. Я вам его любезно предоставлю и объясню. Но для начала вернитесь в окошко редактирования изображения и внизу в поле CSS-класс ссылки пропишите любой уникальный класс, который мы потом используем в коде. Я сделал все довольно банально и прописал класс «a» (латинская, естественно). Вы можете сделать так же и не париться, а можете попариться и придумать свой класс, а потом в моем коде подменить классы в нужных местах на свои. Эти классы нужны для того, чтобы скрипт понимал, какие именно ссылки и изображения он должен обработать.

Работать мы будем сегодня со стилями (CSS) и скриптами (JavaScript). Суть задачи в следующем:

  1. Отслеживаем клик по нашим ссылкам с «секретным» классом, который вы уже придумали.
  2. Запрещаем переходить по ссылке в атрибуте «href».
  3. Получаем значение атрибута «href» и храним его в переменной.
  4. Подставляем это значение в созданный заранее тег «img» в атрибут «src» и выводим img на экран.
  5. При клике вне картинки (по подложке) скрываем картинку и подложку.

Ну, это если в двух словах. На деле были еще некоторые нюансы, которые я постараюсь объяснить в комментариях в самом коде. Кстати предупреждаю, что код довольно простой и незамысловатый. Галереи он обрабатывать не умеет (пока), а работает только с отдельно взятым изображением. Ну, в общем-то, как он работает, вы можете наблюдать на этом сайте. Это именно то, что мне было нужно – при клике на картинку, она открывается в хорошем качестве на этой же странице. Пёрфект!

Скрипт и стили для всплывающих картинок

Дальше будет код. Если вы хотите в нем разобраться (и немного изменить под себя), то читайте мои комментарии в нем. Если вас устраивает то, как это работает на моем сайте, то просто удалите комментарии и вставьте код в нужном месте в вашем сайте. Кстати это сработает не только на WordPress, но и на других движках, если там есть возможность обернуть картинку в ссылку и добавить ей определенный класс.

Код CSS нужно добавить в ваш стилевой файл. Лучше в самом конце и подписать, за что эти стили отвечают, чтобы потом не запутаться, когда захотите что-то изменить. Чаще этот файл называется style.css.

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

Остались вопросы? Добро пожаловать в комментарии.

Автор статьи: Цифровой

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

А также мы будем рады услышать ваши пожелания, если вам по какой-то причине неудобно пользоваться сайтом.

Не будьте равнодушными к проекту. Спасибо! :-)

Понравилась статья?
Обещаем исправиться! Если вам есть, чем дополнить статью, напишите об этом в комментариях. А также будем благодарны за конструктивную критику. Спасибо!

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

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

Комментарии к публикации
  • Сергей avatar
    Сергей

    А как скачать скрипт и стили?

    • Цифровой avatar
      Цифровой

      Видимо уже никак. Они хранились на jsfiddle, который сейчас недоступен. Надеюсь это временно, а не навсегда.

  • Анатолий avatar
    Анатолий

    Отлично получилось.
    Мой вариант
    https://jsfiddle.net/qpoh4k02/

    Фон сделал просто серым. Уменьшил количество анимации.

    По возможности доработайте, пожалуйста:
    1. Добавить крестик на подложку, например «×»
    2. Скрывать большое изображение по «Esc» с клавиатуры.
    3. Не делать всплывающее изображение на мобильных.

  • Макс avatar
    Макс

    Супер. Поставили ваш код) чуть изменили под себя) Здорово! От нас огромное спасибо за такую реализацию!

    • Цифровой avatar
      Цифровой

      Пользуйтесь на здоровье 😉 только у вас сайт что-то не работает. Хотел посмотреть, что вы переделали там под себя, а мне вылезла ошибка базы данных.

Последние публикации
Публикации, похожие на «Как сделать всплывающие изображения в WordPress без плагина»