Ознакомиться с предложением по сертификации и аттестации на сайте http//jurists.moscow - дистанционное обучение.

Недавно на основании всех этих полезностей я сменил дизайн. Сделал это потому что этот блог был первый и пробный - я вообще про всякие CSS HTML JavaScript ничего не знал, но мне очень хотелость чего-нибудь эдакого. Приглашаю посетить мой новый блог там будет много о чём поговорить. Ну а в этом будут советы, советы, советы в помощь блоггеру как и задумывалось!

среда, 13 июня 2007 г.

Используем лайтбокс для показа рисунков

Для понимания ситуации щёлкните на картинку - хотите тоже самое? Тогда приступим.

Лайтбокс это разновидность pop-up'ов которые показываются поверх страницы. Лайтбокс не является новым броузером!

Мы должны совершить три основных шага ( кроме того, перед началом обязательно сделайте бэкап вашего шаблона пункт 1).

Шаг 1
Скачиваем файл Лайтбокс JavaScript
скачиваем картинку "загрузка"
Скачиваем картинку "закрыть"

Шаг 2
Добавьте следующ.. строчку в HTML код сразу после тега <head> или же просто в секции <head>...</head>:
<script type='text/javascript' src='URL вашего хоста/lightbox.js'/>
и меняем URL вашего хоста на конкретно адрес.

Шаг 3
Заливаем всё на хост.

Шаг 4
Далее нужно добавить в CSS вот такой код:
#lightbox{
background-color:#eee;
padding: 10px;
border-bottom: 2px solid #666;
border-right: 2px solid #666;
}
#lightboxDetails{
font-size: 0.8em;
padding-top: 0.4em;
}
#lightboxCaption{ float: left; }
#keyboardMsg{ float: right; }

#lightbox img{ border: none; }
#overlay img{ border: none; }


ВСЁ!
Теперь создаём классный пост - только классный, кидаем на хост картинку, в посте, там где <a href="URL вашей картинки"> нужно добавить свойства, чтобы выглядело так или примерно
<a href="URL вашей картинки" rel="lightbox" and title="Your title"><img scr="URL вашей картинки" width=50% height=50% /></a>
теперь после публикации поста при клике по картинке, которая уменьшена по вертикали и горизонтали на 50% т.е. в два раза, во всплывающем окне будет полноценная картинка!
Удачи!

Ссылка по теме
оптимизация SEO для картинок
вставляем баннер в каждый пост вашего блога

1 комментарий:

Кинокритик комментирует...

"и меняем URL вашего хоста на конкретно адрес."

На какой адрес?

"Шаг 3 Заливаем всё на хост."

На какой хост??? У меня все на блоггере и по зарез нужен этот сервис?

Можете рашифровать? Очень нужно!!!