Как увеличить фото в статье по клику

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

Как увеличить фото в статье по клику

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

  1. Скачал необходимы мне скрипт по ссылке, это архив с папкой. Распаковав архив я загрузил его в корень моего сайта с помощью filezilla, туда где находится папка wp-admin и другие. Это самый простой и удобный метод.
  2. Далее, как я обычно поступаю, я скачиваю оригинальный файл с папки темы сайта «footer.php», редактирую его в программе notepad++, вставляю перед закрывающим тегом </body> следующий код:
<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>

Конечно же ставлю адрес своего сайта в нужных местах. Скрип установлен.

Как увеличить фото в статье ?

Все очень просто. Для начала выбираем фото и добавляем его в медиафайлы

vstavit-mediafajl

Смотрим в настройки, и выбираем Медиафайл. Это обязательное условие.

nastrojki-otobrazheniya-fajla

Добавляем изображение в статью и нажимаем на карандашик, редактируем его.redaktirovat-izobrazhenieЗаходим в настройки отображения, выбираем размер — произвольный, или тот который нужен именно в статье, у меня это ширина 600 px.

nastrojki-otobrazheniya

А в дополнительных настройках, пишем progress, это позволит увеличить изображение по клику на весь экран, но не за его рамки, смотрится очень красиво.
dopolnitelnye-nastrojki-izobrazheniya

Вывод

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

qoogi

Добавить комментарий