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

Все привет с вами Александр Белый. Сегодня решил написать позволяющую повысить юзабилити сайта, а именно наших картинок, которые мы добавляем в статьи. Расскажу как выполнить не хитрые настройки благодаря, которым при нажатии на картинку она будет увеличиваться до истинных размеров. Рассмотрим скрипт увеличения картинки при нажатии в статьях блога.

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

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

Москва ШереметьевоПерепробовав достаточно много различных вариантов настройки изображений с плагинами и без я остановил свое внимание на том, который и установлен у меня сейчас на блоге. Попробуйте нажать на мое фото и вы увидите реализацию данного эффекта. По-моему довольно удобно и функционально. Изображение открывается в скругленной рамке поверх основного текста. Снизу можно увидеть описание к фото. Крестик для закрытия фото.

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

1. Качаем скрипт и размещаем его на своем хостинге

2. Прописываем в файле footer.php несложный код

3. Добавляем фото в статьи сайта или блога.

Итак, первое — скачиваем сам скрипт. Закачиваем его в корневую папку вашего блога. Туда где размещены такие папки как wp-admin, wp-content и другие. Получилось?

Второе в файл footer.php вашей темы необходимо добавить перед тегом </body> следующий код:

<script type="text/javascript" src="http://sgolder.com/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://sgolder.com/simplebox.css');
Box.getScripts('simplebox_js','http://sgolder.com/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>

Обратите внимание, что в вышеуказанном коде вместо моего домена sgolder.com прописываете свой.

С техническими моментами закончили, переходим к добавлению картинки. На самом деле сложного вооще ничего нет. Как обычно добавляем картинку через медиафайл:

mediafile

Далее переходим в раздел редактирования фотографии:

mediafile1

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

mediafile2-1

Теперь переходим в дополнительные настройки редактирования фотографии, где в поле «Отношение» прописываем simplebox -далее Обновить. Все настройки выполнены. Можете проверить как функционально теперь отображается ваша картинка.

mediafile3-1

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

Александр Белый