Как увеличить картинку на своем блоге

Скрипт увеличения  изображения на сайте

Приветствую Вас, дорогие друзья!

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

Как увеличить  картинку.

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

 

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

 

Я прогуливался по разным блогам и воочию мог убедиться что многие веб-мастера пользуются только стандартными способами, и меня это очень раздражало честно говоря, по этому я для себя решил «не допусти такого безобразия у себя на блоге»!

 

Как я нашел способ

 

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

Читайте также  Как вернуть старый редактор вордпресс

 

просмотр

 

 

Поглядите пример, нажмите на картину: Увлекательный эффект. Жмем на изображение и оно не раскрывается в новом окне (что очень не комфортно), а раскрывается на этой же страничке в увеличенном виде,в прекрасной рамке с крестиком в верхнем угле и ниже подставляется описание рисунка. Если вам нравится таковой эффект увеличения изображений, то сможете использовать его!

 

Вот повторюсь, в этой статье таковой эффект просто нужен. Тут есть изображения, в которые необходимо очень пристально приглядываться, чтоб что-то там рассмотреть. У кого слабое зрение, так те совсем ни чего не разглядят. Скрипт этот будет очень кстати!  Увеличить картинку при помощи скрипта. К стати почитайте мою статью «Кнопка наверх для сайта wordpress». Очень полезная статья. Я рассказываю как установить свою кнопку на сайт без плагинов.

 

Настройка скрипта

 

Сходу перейдем к настройке! Все делается в ТРИ обычных шага: Скачиваем скрипт по ссылке, и после скачивания забрасываем все содержимое папки в корневую папку нашего блога. Прекрасно! Это сделали! Далее необходимо перейти в файл footer.php, и добавить в самом конце перед тегом </body> следующий код:

 

Код скрипта

 

<script type=»text/javascript» src=»http://ваш домен.ru/simplebox_util.js»></script>
<script type=»text/javascript»>
(function(){
var boxes=[],els,i,l;
if(document.querySelectorAll){
els=document.querySelectorAll(‘a[rel=simplebox]’);
Box.getStyles(‘simplebox_css’,’http://ваш домен.ru/simplebox.css’);
Box.getScripts(‘simplebox_js’,’http://ваш домен.ru/simplebox.js’,function(){
simplebox.init();
for(i=0,l=els.length;i<l;++i)
simplebox.start(els[i]);
simplebox.start(‘a[rel=simplebox_group]’);
});

}

}
)();</script

 

В данном коде, как вы можете видеть надпись ваш веб-сайт, где вам необходимо прописать собственный адресок блога, добавить код и сохранить. Отлично! Ну в принципе все! Сейчас самая ответственная и основная часть! Мы будем с вами вставлять рисунки в статьи так, чтоб при их нажатии картинки увеличивались, как я вам и показал чуть выше. Ну в принципе смотрите сами. Нажимаем «Добавить медиафайл» :

Читайте также  Как защитить сайт от спама в комментариях

 

добавить файл

 

Загружаем наше изображение в нашу запись, но это еще не все, потом в зрительном режиме жмем на изображение и возникает вот такой карандаш,

 

карандаш

нажимаем и переходим к предстоящей опции:

 

Как увеличить картинку.

И далее в колонке «НАСТРОЙКИ ОТОБРАЖЕНИЯ» «Размер» ставим «Произвольный» потом ширину и высоту вашего рисунка, это и будет тот самый размер который начальный а не увеличенный, далее «Ссылка» должна обязательно быть «Медиафайл» и самое последнее в «ДОПОЛНИТЕЛЬНЫХ НАСТРОЙКАХ» в поле «Отношение» необходимо прописать вот это,

 

simplebox

 

ну вот вам наглядный пример:

simplebox

 

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

ПОДЕЛИТЬСЯ С ДРУЗЬЯМИ:

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Top Rambler's Top100