Один из моих любимых скриптов (правда, последнее время нигде не использую) - это всплывающая картинка при касании курсором мыши определённой ссылки.Очень удобно использовать, как замену лайтбоксу (увеличенное изображение), или для придания крутизны ссылке на какой-либо сайт (всплывающий thumbnail). Если вы создаёте каталог ссылок в блоге, то без этого скрипта не стоит даже и начинать :).
Например (поднесите к ссылкам курсор)...
Html цвета
Индексация блога в Яндексе
Установка и настройка очень простые:
Качаете скрипт, кладёте на свой хостинг и записываем линк на него в <head></head> (если не знаете, как это делается, смотрите предыдущие материалы про jQuery).
Кидаете до кучи в свой шаблон такой стиль:
#screenshot{
position:absolute;
border:1px solid #ccc;
background:white;
padding:5px;
display:none;
color:gray;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
-moz-box-shadow: 0 2px 10px #999999;
-webkit-box-shadow: 0 2px 8px #999999;
box-shadow: 0 2px 8px #000000;
}Я слегка модифицировал его элементы: изменил цвет фона и добавил тени. Настройки интуитивно понятны, полагаю, разжёвывать не надо?Html код ссылки будет выглядеть таким образом:
<a href="http://ссылка на страницу" class="screenshot" rel="ссылка на картинку" title="Текст, который будет виден под изображением">Название ссылки</a>
Обращаю внимание на картинку. Скрипт запускает её в реальном размере. То есть, если картинка 240 на 120 пикселей, то именно таких габаритов в её увидите при касании курсором ссылки.
Кому не понятно, welcome в комменты. Этот скрипт должен работать на любом движке блога или сайта, поддерживающем javascript и jQuery.
Здесь живёт автор скрипта.
Небольшой трюк для тех, кто использует Blogger в качестве менеджера закачек фотографий на фотохостинг пикасы для своего блога.
По умолчанию, любая вставленная фотография в html представлении выглядит вот так (будем считать, что размер изображения выбран "средний"):
Код вставленной картинки состоит из двух ссылок:
жёлтая линия - ссылка на изображение исходного размера (s1600)
красная линия - ссылка на уменьшенное изображение (s320)
Поэтому если лень подгонять в фоторедакторе размеры картинки, вы всегда можете воспользоваться второй "уменьшенной" ссылкой для создания из неё предпросмотра в только что разобранном скрипте.
Что ещё интересного?
Можете почитать раздел "ссылки" ↓ (см. на теги), в котором я рассматривал кучу способов, как обращаться с разными ссылками в своём блоге.
Комментариев нет:
Отправить комментарий