Скрипт увеличения картинки при нажатии

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

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

Для начала скачиваем скрипт. Данный скрипт можно скачать отсюда

Далее распаковываем содержимое папки  Simplebox в корень вашего сайта,там где лежат все файлы для вашего сайта

После этого копируем код самого скрипта и вставляем его перед закрывающим тегом body, обычно он находится в футере (footer).

<script src="http://site.ru/simplebox_util.js" type="text/javascript"></script><script type="text/javascript">// <![CDATA[
(function(){
var boxes=[],els,i,l;
if(document.querySelectorAll){
els=document.querySelectorAll('a[rel=simplebox]');
Box.getStyles('simplebox_css','http://site.ru/simplebox.css');
Box.getScripts('simplebox_js','http://site.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>

Сразу же в этом скрипте заменяем пути в этих строчках и указывайте вместо site.ru название своего сайта:

<script type="text/javascript" src="http://site.ru/simplebox_util.js"></script>
Box.getStyles('simplebox_css','http://site.ru/simplebox.css');
Box.getScripts('simplebox_js','http://site.ru/simplebox.js',function(){

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

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