qTip. Предпросмотр для ссылок в виде авто-скриншотов

qTip - лучший в своём классе плагин "всплывалки" на jQuery и давно оставил позади все свои ближайшие аналоги. Модальные окна, подсказки, предпросмотры с картинками, т.е. всё, что всплывает поверх страницы и не требует её перезагрузки - всё реально сделать при помощи qTip.

Сегодняшний subj: как прокачать свой сайт всплывающими авто-скриншотами для ссылок.
Предположим, вы делаете линко-каталог, либо хотите поставить запоминающиеся постовые. Естественно, есть и ручной способ, и он более надёжный, но требует довольно много времени на создание скриншотов, их обработку и закачку. В некоторых CMS (например, Joomla) есть для того, о чём напишу ниже, готовые плагины.
qTip можно встретить на форумах и солидных сайтах. Разброс использования широкий.

Заканчиваю болтологию, ближе к делу.
Сначала нужно определиться с сервисом по снятию и хранению авто-скриншотов. Разработчики qTip предлагают www.websnapr.com. Почему бы и нет? Регимся, подтверждаем регистрацию и получаем api key (мимо не пройдёте) для своего домена (блога) ↓

С этим всё ясно. В довесок нужно в блог прописать линк на скрипт сервиса:

<script type="text/javascript" src="http://www.websnapr.com/js/websnapr.js" rel="nofollow"></script>

Второй этап - это "настроечный" (скрипт, в котором описаны все параметры настройки плагина) скрипт qTip:

<script class="example" type="text/javascript">
// Create the tooltips only on document load
$(document).ready(function() 
{

	var apiKey = 'ваш_api_key';

	// Notice the use of the each method to gain access to each element individually
	$('#content a').each(function()
	{
		// Grab the URL from our link
		var url = encodeURIComponent( $(this).attr('href') ),

		// Create image thumbnail using Websnapr thumbnail service
		thumbnail = $('<img />').attr({
			src: 'http://images.websnapr.com/?url=' + url + '&key=' + apiKey + '&hash=' + encodeURIComponent(websnapr_hash),
			alt: 'Loading thumbnail...',
			width: 202,
			height: 152
		});

		// Setup the tooltip with the content
		$(this).qtip(
		{
			content: thumbnail,
			position: {
				corner: {
					tooltip: 'bottomMiddle',
					target: 'topMiddle'
				}
			},
			style: {
				tip: true, // Give it a speech bubble tip with automatic corner detection
				name: 'cream'
			}
		});
	});
});
</script>

В него мы копируем выданный нам ключ. И смотрим на настройки:
-- width: 202, height: 152 - размеры скиншота (трогать не имеет смысла)
-- строка $('#content a') говорит о том, что будет обрабатываться любая ссылка (тег <a>) c id="content"
-- блок corner определяет положение скриншота над ссылкой (см. документацию), можете попробовать разные параметры в соответствии с документацией
-- style - один из предустановленных стилей (можно использовать собственные)

Ссылка выглядит обычным образом, но должна быть внути id, которому мы дали название "content":

<div id="content">
<a href="http://yandex.ru">yandex.ru</a>
<a href="http://craigsworks.com/projects/qtip/">craigsworks.com/projects/qtip</a>
</div>

Демо (обеим ссылкам автоматически присвоился скриншот):

yandex.ru
craigsworks.com/projects/qtip

...просто наведите мышь ↑

В общем-то это всё. Для функционирования qTip необходимы: jQuery и скрипт-ядро плагина, установка которого описана в предыдущей статье "qTip - The jQuery tooltip plugin" (ссылка наверху), эти скрипты я настоятельно рекомендую перезалить на свой собственный платный или бесплатный хостинг.