Скрипт увеличения картинки при нажатии

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

Давайте рассмотрим процесс установки скрипта и принцип его действия.

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

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

После этого откройте файл functions.php (в консоле блога Внешний Вид — Редактор) и вставьте туда следующий код:

add_filter('the_content', 'addhighslideclass_replace');
function addhighslideclass_replace ($content)
{ global $post;
$pattern = "/]*).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>(.*?)<\/a>/i";
$replacement = '$7';
$content = preg_replace($pattern, $replacement, $content);
return $content;
}

между двумя другими функциями:

или же в самом конце, перед закрывающим тегом php:

?>

Нажмите кнопку Обновить файл.

После этого откройте файл header.php и вставьте этот код:

<link rel="stylesheet" href="http://www.seofive.ru/wp-content/themes/seofive2/addons/highslide/highslide.css" type="text/css" />
<script type="text/javascript" src="http://www.seofive.ru/wp-content/themes/seofive2/addons/highslide/highslide-with-html.packed.js"></script>
<script type="text/javascript">
hs.graphicsDir = "http://www.seofive.ru/wp-content/themes/seofive2/addons/highslide/graphics/";
hs.outlineType = "rounded-white";
hs.outlineWhileAnimating = true;
hs.showCredits = false;
</script>

после любой строчки с началом:

<link rel=

Жмем кнопку Обновить файл и загружаем любую картинку большого размера для проверки работоспособности скрипта.

После загрузки картинки, в ее свойствах справа, установите следующие параметры:

Выравнивание – по собственному усмотрению

Ссылка – Медиафайл

Размер – Средний

Это нужно для того, то скрипт увеличения картинки при нажатии мог полноценно работать.

Все, обновляете страницу и наслаждаетесь результатом.

Скрипт работает безупречно и молниеносно, проверено на нескольких сайтах.

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

А на этом у меня все, всем пока!