Скрипт увеличения картинки при нажатии на Вордпресс

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

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

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

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

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

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

Если же у вас не СДЛ, а например, простой сплог, тогда проще выводить фавикон и водяной знак плагином, чтобы не тратить время на создание, дизайн и настройку блога. Потому что только одна настройка плагина Hyper Cache отнимает много времени у некоторых пользователей.

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

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

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

Обязательно перед началом работы нужно сделать резервную копию (Бэкап).

Как установить скрипт увеличения картинки и принцип его работы

  1. Скачайте специальный архив «[aspan]здесь[/aspan]», в нем будет находиться непосредственно сам скрипт увеличения картинки при нажатии и дополнительно текстовый документ в котором будет подробно расписан весь процесс установки скрипта на сайт;
  2. После того как вы скачаете архив, его нужно разархивировать и папку addons закинуть на хостинг в папку с вашей темой;
  3. После этого открываем файл функций function.php (если вы делаете все через админку то нужно перейти в «Внешний вид» — «Редактор» — «function.php») и вставить вот этот код:
add_filter('the_content', 'addhighslideclass_replace');
function addhighslideclass_replace ($content)
{ global $post;
$pattern = "/
$replacement = '$7';
$content = preg_replace($pattern, $replacement, $content);
return $content;
}

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

Читайте так же:  Реф-спам. Как бороться с реф-спамом и что это вообще такое?

Открываем файл Header.php для редактирования и вставляем следующий код:

<link rel="stylesheet" href="http://www.ваш сайт.ру/wp-content/themes/название темы/addons/highslide/highslide.css" type="text/css" />
<script type="text/javascript" src="http://www.ваш сайт.ру/wp-content/themes/название темы/addons/highslide/highslide-with-html.packed.js"></script>
<script type="text/javascript">
hs.graphicsDir = "http://www.ваш сайт.ру/wp-content/themes/название темы/addons/highslide/graphics/";
hs.outlineType = "rounded-white";
hs.outlineWhileAnimating = true;
hs.showCredits = false;
</script>

установка скрипта увеличения картинок

Вставлять код нужно сразу после строки <link href=

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

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

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

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

Так же при загрузке изображения нужно выставить необходимые параметры для корректной работы скрипта увеличения картинок:

  • Размер – Средний;
  • Выравнивание – любое;
  • Ссылка – Медиафайл.

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

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

Читайте так же:  Создаем автоматическую микроразметку изображений на Вордпресс без плагинов

На этом у меня все, буду заканчивать данный пост, если есть вопросы, милости прошу, задавайте их в комментариях, я с удовольствием постараюсь на них ответить. Скажите, кто-нибудь уже использует скрипты для увеличения картинок при нажатии (клике), или предпочитают пользоваться плагинами?

Есть, конечно, и немного другой скрипт увеличения картинок, но там есть огромный минус в том, что все время приходиться прописывать в свойствах изображений Отношение «Simplebox», ужас как неудобно!

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

Всем пока и до новых встреч!