Скрипт увеличения картинки при нажатии
Всем привет друзья. В этой статье, я хочу рассказать вам о скрипте, с помощью которого можно увеличивать картинку всего одним кликом мышки, до ее оригинального размера. Проводя различные технически работы, связанные с заявленным мною ранее марафоном, передо мной стала задача, уменьшения количества используемых плагинов до самого минимума, ради ускорения скорости загрузки блога. В первую очередь, я решил поменять плагин 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="https://jlax8wx0ir.a.trbcdn.net/wp-content/themes/seofive2/addons/highslide/highslide.css" type="text/css" />
<script type="text/javascript" src="https://jlax8wx0ir.a.trbcdn.net/wp-content/themes/seofive2/addons/highslide/highslide-with-html.packed.js"></script>
<script type="text/javascript">
hs.graphicsDir = "https://jlax8wx0ir.a.trbcdn.net/wp-content/themes/seofive2/addons/highslide/graphics/";
hs.outlineType = "rounded-white";
hs.outlineWhileAnimating = true;
hs.showCredits = false;
</script>
после любой строчки с началом:
<link rel=
Жмем кнопку Обновить файл и загружаем любую картинку большого размера для проверки работоспособности скрипта.
После загрузки картинки, в ее свойствах справа, установите следующие параметры:
Выравнивание – по собственному усмотрению
Ссылка – Медиафайл
Размер – Средний
Это нужно для того, то скрипт увеличения картинки при нажатии мог полноценно работать.
Все, обновляете страницу и наслаждаетесь результатом.
Скрипт работает безупречно и молниеносно, проверено на нескольких сайтах.
Вот и все друзья, если что-то непонятно из текстовой части этой записи, посмотрите видео, которое я специально снял, чтобы продемонстрировать работу скрипта.
А на этом у меня все, всем пока!
и получай самую свежую информацию на свой e-mail!
Свежая информация в сфере SEO:
Скрипт хорош, не спорю, только есть одно но…
Теперь при внесении размеров в настройках медиафайлов для ВСЕХ картинок будет создаваться копия увеличенная или уменьшенная вне зависимости от того, нужно вам это или нет.
10 копий это не проблема, а когда картинок тысяча, то стоит задуматься.
Копия будет создаваться для тех картинок, которые нужно увеличить. Как показывает практика, их количество на общем фоне, не так велико.
Если картинки не много весят то ничего страшного нет 🙂
У меня тоже стоял плагин Auto Highslide, но всего лишь две недели, я его деактивировал, а вот насчёт скрипта конечно хорошая идея, но я сделал по проще в администраторской панели блога в настройках медиафайла выставил всё по нулям. Когда загружаю допустим картинку на 350х350, я её уменьшаю во время редактирования записи, и при кликанье картинки появляется оригинальный размер. При этом дубликаты не создаются.
Но картинка у вас открывается в новом окне, а это не всегда удобно для читателя.
Действительно открывается в новом окне, но для опытного пользователя думаю не будет сложным возвратиться назад.
Доброго всем!
Плагин для увеличения картинки помогает на сайте увеличить количество просмотров. Не всегда удобно рассматривать мелкие картинки на различных сайтах, гораздо удобнее когда изображение по клику увеличивается в размерах и дает более качественную картинку.
Да забыл сказать Александру спасибо за видео, все наглядно расписано по настройке плагина. Многим думаю понравиться и посмотреть в живую, а не только в текстовом формате.
Отлично. Поставил — все работает
Скрипт хорош. Нужно будет внедрить, замечены какие-то весомые минусы?
Нет, только плюсы )
Работает как часы, на более 20-ти моих сайтах и еще массе сайтов и блогов моих читателей. Никто не жалуется.
Ммм. Это очень хорошо) Просто очень не люблю плагины) Обожаю код)
Я тоже люблю с кодами работать.Но слишком много кодов, тоже не есть хорошо.
А при обновление движка, могут почти все рухнуть.
Проверил на испытательном блоге — скрипт Отлично работает, так же как и плагин Auto Highslide, который мне нравится.
Буду ставить на все.
Благодарю.
Спасибо, пост для меня оказался чрезвычайно полезным! Давно хотел сделать увеличение широкоформатных картинок на своем блоге. Спасибо!
не работает у меня, как только функцию вставляю весь контент пропадает
Скорее всего где-то есть ошибка у вас. Еще раз внимательно прочтите статью и посмотрите видео.
У меня все получилось. Картинки открываются в нужном варианте. Спасибо ))
И это радует.Значит статья вам помогла
Здравствуйте! Скрипт действительно полезен, автору спасибо. Но я столкнулся с проблемой, мой сайт пока на виртуальном сервере, проблема в том, что при нажатии на картинку появляется надпись loading и на этом все, т.е. картинка в полном размере не загружается. Подскажите это особенность связана с тем, что сайт на виртуалке стоит? За ранее благодарен.
Не думаю, что в этом причина, пересмотрите еще раз, пути к папке с вашей темой и другой код на правильность установки.
Тоже выступаю против плагинов на блоге. Скрипт нужная вещь. Пугают только копии изображений. Александр, а как быть со старыми изображениями? Я выставляю нет ссылки. Все нужно редактировать?
Копии можно вручную почистить, есть даже плагины специальные, но там нужно осторожно работать, так как можно удалить нужные файлы.
Со старыми изображениями по идеи нужно поработать вручную, попробуйте.
я себе плагин устанавливала, но потом поняла, что в такой функции нет необходимости и плагин временно деактивировала. Но на новый сайт воспользуюсь вашими советами, посмотрим что из этого выйдет. Хотя в коды я не люблю залезать, потому что как залезу, то за уши меня не оттянешь, начинаю что-то менять и в конце концов это заканчивается тем, что я порчу дизайн сайта)
У меня тоже стоит скрипт, плагина нет.) У меня в выборе есть 3 пункта. Чтобы картинка в уменьшенном виде была, в полном размере и еще какой-то размер стоит. Я в-принципе всегда делаю полный размер картинки, чтобы увеличивать не приходилось, просто подгоняю картинку сразу под блог.
А когда вставляю картинки, которым мало будет ширины 500 пикселей, то уж уменьшенный вариант ставлю.) Но, таких мало.
А что лучше выбрать скрипт или плагин для увеличения картинок, глянул список своих плагинов а у меня их 35 шт!
Сокращайте обязательно список ваших плагинов, и используйте скрипт описанный в этой статье.
На выходных займусь, а какие есть ещё скрипты дляч ВП не подскажете!? А то что то полазив в интернете ни чего полезного не нашёл!
В зависимости от того, что вам нужно?
Например, есть ли скрипт похожих записей в конце статьи, чтобы с картинками выводились!?
Да есть, у меня так выводятся похожие записи.
А не подскажете где взять такой скрипт, а то у меня похожие записи каряво выглядят!
Такие вещи проще на фрилансе заказать.
И как сделать форму подписки как у вас в конце статьи!?
Это работа дизайнера и верстальщика.
Надо себе так сделать тоже, будем искать дизайнера
у меня тоже такой скрипт стоит 🙂
я еще себе на сайт не ставил, думаю применить на новом блоге уже!
Встречал ранее на других блогах скрипт увеличения картинки при наведении. Но я думаю что этот скрипт будет точно удобнее
Я думаю не сильно удобно будет, при случайном неволе мышки будет увеличиваться картинка
Так мышкой нужно еще и нажать на картинку для увеличения.
Я у себя на новом блоге применил. очень хорошо все работает, спасибо за информацию!
Давно хотел избавиться от плагина увеличения картинок, теперь можно увеличить через скрипт. Больше таких статей, Александр!
Мне тоже нравятся такие статьи, много для себя полезного открываешь!
Удобная и порой необходимая вещь для тех, кто ведут свои блоги.
все подробно так описано — для новичков в самый раз!
И не только для новичков, функция увеличения пригодится всем.
Вот и я про тоже.А у меня плагин установлен.
да, отличная вещь- пользуюсь, знаю. Благодарю за статью. По моему мнению, нужно ставить — не пожалеете
Я делаю чуть чуть полегче, в окне редактирования картинки выбираю: медиафайл, ставлю галочку открыть в новом окне, в окне ОТНОШЕНИЕ прописываю simplebox Вот и все! И нажимая на картинку она увеличивается!
Отличный скрипт.Скачал,нужно заменить теперь плагин.
Здравствуйте, Александр, а для блога на Blogger’e можно это реализовать?
К сожалению, нет!
Жаль конечно, но всё равно спасибо за ответ!!!
Скрипт для Blogger’e тяжело найти.Но я видел на блоге blogodel такой скрипт.
На Blogger’e позволяют свои скрипты устанавливать?
Конечно, незнаю как раньше сейчас устанавливают
Александр, здравствуйте!
Спасибо за доступно изложенный Вами материал!
Недавно столкнулся с этой проблемой и никак не мог найти подходящее решение.
Буду пробовать!