Предпросмотр для ссылки

Один из моих любимых скриптов (правда, последнее время нигде не использую) - это всплывающая картинка при касании курсором мыши определённой ссылки.
Очень удобно использовать, как замену лайтбоксу (увеличенное изображение), или для придания крутизны ссылке на какой-либо сайт (всплывающий 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)

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

Что ещё интересного?
Можете почитать раздел "ссылки" ↓ (см. на теги), в котором я рассматривал кучу способов, как обращаться с разными ссылками в своём блоге.

Комментариев нет:

Отправить комментарий