Отображение картинки с увеличением по щелчку в центре блога на блоге Блогспот.

Автор Damir-Tote. Опубликовано в Блог, Все о Блогспот

Хотите красивое отображение картинки на вашем блоге на Блогспот, а не как обычное. При котором, увеличенная копия картинки открывается в новом окне, на этом примере я вам расскажу, как отобразить картинку в самом же блоге. Открывается картинка в специальном всплывающем pop-up-окне. Очень красивое замещение.
 
Для примера я вам могу представить тестовый блог, в котором я все это уже проделал. Так же хочу заранее предупредить, что этот метод работает не на всех блогах. Так как эти скрипты враждуют с другими скриптами блога, поэтому на этом блоге он не работает. У меня много скриптов напичкано. А вот на чистом шаблоне, он работает как часы.
Отображение картинки с увеличением по щелчку в центре блога на блоге Блогспот 
Это на мой взгляд лучший способ разместить картинки большого размера на блоге Блогспот.  Желающий может кликнув на картинку увидеть ее в полном размере, а потом закрыв ее читать статью дальше.
 
Данный скрипт работает на основе Lightbox 2.  Его в основном применяют на Дрюпале и изредка на Вордпресе. Но теперь его можно использовать и на Блогспоте.
 
            Итак, перейдем к установке данного скрипта:
 
1) Переходим в панели инструментов «Дизайн», далее «Изменить HTML».  Ну естественно для начала стоит сделать резервную копию своего шаблона или по экспериментировать как я на новом тестовом блоге.
 
2) Далее ищем в коде шаблона следующий тег </head>. И перед ним вставляем скрипты, представленные ниже.

<script src='http://dl.getdropbox.com/u/1056476/lightbox2.04/js/prototype.js' type='text/javascript'/>
<script src='http://dl.getdropbox.com/u/1056476/lightbox2.04/js/scriptaculous.js?load=effects,builder' type='text/javascript'/>
<script src='http://dl.getdropbox.com/u/1056476/lightbox2.04/js/lightbox.js' type='text/javascript'/>
<link href='http://dl.getdropbox.com/u/1056476/lightbox2.04/css/lightbox.css' media='screen' rel='stylesheet' type='text/css'/>

3) Сохраните шаблон.

4) Создайте новый пост, загрузите большую картинку и теперь нужно вставить тег rel=»lightbox». Это нужно для того, чтобы он обратившись на скрипт сделал данный эффект. Этот тег необходимо включать постоянно, если вы хотите данным образом, чтобы полноразмерная картинка открывалась.

Рассмотрите мой пример, если не знаете куда его вставлять.

<a href="http://4.bp.blogspot.com/-nbYAxL-9QN4/TeM6bLR-WjI/AAAAAAAAA5Q/QEZRNWPhgEE/s1600/%25D0%25B7%25D0%25B8%25D0%25B4%25D0%25B0%25D0%25BD.jpg" imageanchor="1" rel="lightbox" style="margin-left:1em; margin-right:1em"><img border="0" height="320" width="320" src="http://4.bp.blogspot.com/-nbYAxL-9QN4/TeM6bLR-WjI/AAAAAAAAA5Q/QEZRNWPhgEE/s320/%25D0%25B7%25D0%25B8%25D0%25B4%25D0%25B0%25D0%25BD.jpg" /></a>

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

До новых статей!!!

Трекбэк с Вашего сайта.

.