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

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

Как увеличить картинку.Приветствую Вас, дорогие друзья!

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

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

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

 

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

 

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

 

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

 

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

 

просмотр

 

 

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

 

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

 

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

 

Сходу перейдем к настройке! Все делается в ТРИ обычных шага: Скачиваем скрипт по ссылке, и после скачивания забрасываем все содержимое папки в корневую папку нашего блога. Прекрасно! Это сделали! Далее необходимо перейти в файл 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

 

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

Понравилась статья? Поделись с друзьями:

   

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

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

почта
Мой магазин
moi magasin

Хостинг ХостиЯ

Мой канал

ютуб

Хотите иметь свой магазин и партнерскую программу?

скрипт

СКАЧАТЬ БЕСПЛАТНО

сайт создаем сами