Блог
Анны Фёдоровой Как зарабатывать в интернете и на своём блоге?

Как увеличить картинку на сайте в статье?

2015.03.18
Автор:

Как увеличить картинку на сайте в статье

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

Мои постоянные читатели не раз обращались ко мне с этим вопросом «Как увеличить картинку на сайте в статье» и чтобы при этом нагрузка на блог была минимальная.

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

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

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

Кстати именно его я использовала на странице «Автор», где он мне понадобился, чтобы разместить большое количество фотографий.

Теперь давайте ближе к делу, как увеличить картинку на сайте?!

Нужно проделать 3 простых шага:

1. Скачать скрипт и закинуть его на хостинг в корневую директорию своего сайта

2. Добавить код в файл footer.php

3. Загрузить изображение в статью и его настроить

Вначале скачиваем скрипт по этой ссылке. И загружаем его на свой хостинг в корень своего блога. Напомню, что корень блога — это, где находятся папки wp-admin, wp-content и прочее. Вот туда и загружаем. И не забываем распаковать.

Следующим шагом будет добавление в файл footer.php темы своего сайта специальный код. Только вместо site.ru впишите свой домен. Вставляем код перед закрывающим тегом </body>.

Хорошо, самую сложную работу сделали. Загрузили скрипт на хостинг, добавили код в футер. Осталось теперь настроить картинку, чтобы она при нажатии увеличивалась в размере.

Как обычно загружаем изображение в статью нажав на кнопку «Добавить медиафайл». Далее проследите, чтобы в настройках отображения файла в параметре «Ссылка» было отмечено «Медиафайл» и жмём «Вставить в запись».

uvelichenie-kartinki

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

uvelichenie-kartinki-pri-nazhatii

И ниже в «Дополнительных настройках» в графу «Отношение» вписываем simplebox и нажимаем обновить. Всё ОК.

kak-uvelichit-kartinku-na-bloge

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

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

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

Кому что не понятно, пишите в комментариях. Но в принципе тут всё элементарно просто.

Подписывайтесь на обновления блога! Всем пока и до новых встреч!

С уважением, Анна Фёдорова

 


Комментариев: 9

  1. Александр

    Скрипт скачал. Попробую и себе на сайте так сделать. Потом напишу получилось или нет.

    Ответить
    1. Анна Федорова

      И правильно сделали, наверняка как-нибудь пригодится.

      Ответить
  2. Александр

    Анна, спасибо. У меня молодой сайт. Попробую и себе добавить такую функцию. :)

    Ответить
    1. Анна Федорова

      Всегда пожалуйста!Полезная функция.

      Ответить
  3. Роман

    Стал много зависать на молодых блогах. Вижу новых знакомых и у вас Анна ))

    Ответить
    1. Анна Фёдорова

      Да, везде знакомые лица. :)

      Ответить
  4. Артем

    Спасибо, давно думал поискать на эту тему информацию, и нашел на вашем блоге, буду читать другие статьи вашего блога пока все не перечитаю.

    Ответить
  5. Мишаня

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

    Так что — многие об этом и не знают, надо как-то предупреждать.

    Ответить
  6. Сергей

    Использую для этого дела плагин. Не помню точно, но не autho highlide. Скрипт не хочу ставить. Небезопасно. Плагин хоть разработчик поддерживает и обнавляет. Да и есть очень легкие плагины которые практически никакой нагрузки не создают. В принципе, скрипт, это практически тот же плагин.

    Ответить

Оставить комментарий: