Для понимания ситуации щёлкните на картинку - хотите тоже самое? Тогда приступим.
Лайтбокс это разновидность 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 для картинок
вставляем баннер в каждый пост вашего блога
среда, 13 июня 2007 г.
Используем лайтбокс для показа рисунков
Нравится пост? Подпишись на RSS!
Подписаться на:
Комментарии к сообщению (Atom)
1 комментарий:
"и меняем URL вашего хоста на конкретно адрес."
На какой адрес?
"Шаг 3 Заливаем всё на хост."
На какой хост??? У меня все на блоггере и по зарез нужен этот сервис?
Можете рашифровать? Очень нужно!!!
Отправить комментарий