Seo-Бизнес блог Progress-project

Все о создании, продвижении сайтов и заработке в интернете

Обновлённый дизайн блога Progress-project
logotip «Progress-project»
logotip «Progress-project»

Эффектное увеличение изображений в статье блога при клике, с помощью скрипта

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

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

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

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

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

И вот потратив достаточное количество времени на поиск решения этой проблемы у меня оказалось на руках несколько вариантов увеличения картинок в WordPress с помощью специальных скриптов.

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

Признаюсь честно за время ведения блогов у меня успел накопиться определённый опыт в работе с HTML, PHP и CSS. Но то, что предлагалось в сети в качестве решения нашей задачи, заставило меня изрядно попотеть выводя данный блог несколько раз из строя.

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

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

Давайте теперь рассмотрим, как вам организовать такое-же на своём блоге.

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

Установка и настройке будут происходить в 3 действия.

  1. Нам потребуется скачать архив со криптом и после этого загрузить его на свой хостинг в корень сайта. О том какой хостинг лучше всего выбрать для своего сайта я писал здесь.
  2. В файле footer.php вашей темы прописать не большой код.
  3. Добавить непосредственно саму картинку в статью.

Теперь давайте по подробней.

И так скачиваем архив со скриптом по ссылке.

Далее распаковываем и загружаем содержимое по ftp, в корневую папку, туда где находятся такие файлы как: wp-content, wp-admin, wp-includes итд.

Я специально в коде предложенном ниже указал в адресе название папки «/sbox/», чтобы вы могли загрузить полностью всю папку а не по отдельности файлы, как предлагается на других блогах.

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

Дальше находим в вашей теме файл «footer.php» и прописываем в нём перед тегом </body> (закрывающийся тег), вот этот код, конечно предварительно заменив «site.ru» на адрес вашего ресурса:

<script type="text/javascript" src="https://site.ru/sbox/progress_util.js"></script>
 <script type="text/javascript">
 (function(){
 var boxes=[],els,i,l;
 if(document.querySelectorAll){
 els=document.querySelectorAll('a[rel=progress]');
 Box.getStyles('progress_css','https://site.ru/sbox/progress.css');
 Box.getScripts('progress_js','https://site.ru/sbox/progress.js',function(){
 progress.init();
 for(i=0,l=els.length;i<l;++i)
 progress.start(els[i]);
 progress.start('a[rel=progress_group]');
 });
 }
 })();</script>

Ну вот собственно и всё, что касаемо установки скрипта увеличивающего картинки, далее нам осталось настроить саму картинку в статье.

Настройка картинки увеличивающейся с помощью скрипта

И так, как и прежде загружаем изображение воспользовавшись в редакторе кнопкой добавления медиафайлов:

Дальше в «настройках отображения файла» следует указать ссылку как медиафайл:

После этого нажимаем «вставить в запись».

Дальше уже находясь в редакторе самой статьи переходим в настройки изображения:

Обращаю ваше внимание все действия происходят на WordPress версии 4.5.3, если у вас установлена другая версия движка то и внешний вид настройки может быть немного другой, но в любом случае ищите, что-то подобное:

  • 1. Указываем тот размер в котором будет находиться изображение в статье в не увеличенном виде.

Сразу хочу немного объяснить принцип работы. Скрипт в состоянии увеличить картинку только до размера оригинала. То-есть если картинка была загружена на сервер размером к примеру 600 x 600 то здесь нам необходимо указать меньший размер, допустим 300 x 300. При таких условиях по умолчанию картинка в статье будит 300 x 300 а при клике по ней будет увеличиться до 600 x 600 надеюсь, что объяснил понятно.

  • 2. Здесь просто удостоверяемся в том, что ссылка выбрана как медиафайл.
  • 3. Отношение пишем progress.

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

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

С уважением, автор блога!
© progress-project
★Обновлено:2016-07-07

Введите свой e-mail:

Вы можете поделиться статьёй в социальных сетях:

Ваш комментарий

Внимание! Перед тем, как вставить в комментарий: html, php либо JavaScript, преобразуйте его в HTML сущность!

» Подписаться на комментарии по RSS
Поиск по блогу

Введите свой e-mail:

ВКонтакте Google+ Facebook RSS-лента сайта abrek-ad-abra.ru

Топ комментаторов

Виктор(6)
seoonly(4)
Николай(3)
Олег(3)
Иван(3)

© 2015-2017

SEO-Бизнес блог «Progress-project».

Все материалы, опубликованные на сайте: принадлежат автору и охраняются в соответствии с законодательством РФ.

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



seo-блог