Скрипт увеличения изображения на сайте
Приветствую Вас, дорогие друзья!
Как увеличить картинку. Пора нам вставлять на своем блоге в статьи рисунки так, чтоб при нажатии на их, они увеличивались и показывались в уникальном размере. И на данном этапе мы узнаем как увеличить картинку, чтобы эффект роста картинки был бы комфортным для вас и ваших читателей в вашем блоге. Ну что, приступим!
Как увеличить картинку.
Когда я только сделал для себя блог, я об этом не особо думал. Как увеличить картинку. Думал пока мне не нужно это увеличение картинок и так нормально. Но позже, когда я столкнулся с такой неувязкой. Большая картина в пост не влазила, а при уменьшении размера ни хрена не видно, а ее необходимо как-то показать. Стопроцентно.
Я задумался! Да вы быть может думаете, а почему я не воспользовался стандартными способами? Я вам могу ответить, так как картину стандартный способ открывает в новом окне и это вообщем не хорошо и не комфортно, по этому я даже и не хотел чтобы так было и у меня.
Я прогуливался по разным блогам и воочию мог убедиться что многие веб-мастера пользуются только стандартными способами, и меня это очень раздражало честно говоря, по этому я для себя решил «не допусти такого безобразия у себя на блоге»!
Как я нашел способ
И прошлось находить способ как увеличить картинку у себя на блоге, чтоб было прекрасно и не напрягало, итак , что я только не делал, какие я только плагины не устанавливал, все как-то не по людски, либо вообще ничего не происходило, картина как была малехонькой так и оставалась. Я честно говоря испробовал очень много разных вариантов скриптов для увеличения изображений, но остановил свой выбор на этом скрипте, который делает вот такой потрясающий эффект.
Поглядите пример, нажмите на картину: Увлекательный эффект. Жмем на изображение и оно не раскрывается в новом окне (что очень не комфортно), а раскрывается на этой же страничке в увеличенном виде,в прекрасной рамке с крестиком в верхнем угле и ниже подставляется описание рисунка. Если вам нравится таковой эффект увеличения изображений, то сможете использовать его!
Вот повторюсь, в этой статье таковой эффект просто нужен. Тут есть изображения, в которые необходимо очень пристально приглядываться, чтоб что-то там рассмотреть. У кого слабое зрение, так те совсем ни чего не разглядят. Скрипт этот будет очень кстати! Увеличить картинку при помощи скрипта. К стати почитайте мою статью «Кнопка наверх для сайта wordpress». Очень полезная статья. Я рассказываю как установить свою кнопку на сайт без плагинов.
Настройка скрипта
Сходу перейдем к настройке! Все делается в ТРИ обычных шага: Скачиваем скрипт по ссылке, и после скачивания забрасываем все содержимое папки в корневую папку нашего блога. Прекрасно! Это сделали! Далее необходимо перейти в файл footer.php, и добавить в самом конце перед тегом </body> следующий код:
Код скрипта
<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
В данном коде, как вы можете видеть надпись ваш веб-сайт, где вам необходимо прописать собственный адресок блога, добавить код и сохранить. Отлично! Ну в принципе все! Сейчас самая ответственная и основная часть! Мы будем с вами вставлять рисунки в статьи так, чтоб при их нажатии картинки увеличивались, как я вам и показал чуть выше. Ну в принципе смотрите сами. Нажимаем «Добавить медиафайл» :
Загружаем наше изображение в нашу запись, но это еще не все, потом в зрительном режиме жмем на изображение и возникает вот такой карандаш,
нажимаем и переходим к предстоящей опции:
И далее в колонке «НАСТРОЙКИ ОТОБРАЖЕНИЯ» «Размер» ставим «Произвольный» потом ширину и высоту вашего рисунка, это и будет тот самый размер который начальный а не увеличенный, далее «Ссылка» должна обязательно быть «Медиафайл» и самое последнее в «ДОПОЛНИТЕЛЬНЫХ НАСТРОЙКАХ» в поле «Отношение» необходимо прописать вот это,
ну вот вам наглядный пример:
Вот теперь и все. Сохраняем и начинаем радоваться. Ну вот как-то так, пользуйтесь себе на здоровья. Теперь мы с вами знаем, как увеличить картинку . Если что-то не понятно пишите в комментариях, и еще если кто-то знает другой вариант получше пишите тоже в комментариях. Всем пока !
