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>
Демо (обеим ссылкам автоматически присвоился скриншот):
...просто наведите мышь ↑
...просто наведите мышь ↑
В общем-то это всё. Для функционирования qTip необходимы: jQuery и скрипт-ядро плагина, установка которого описана в предыдущей статье "qTip - The jQuery tooltip plugin" (ссылка наверху), эти скрипты я настоятельно рекомендую перезалить на свой собственный платный или бесплатный хостинг.
[url=http://buygenericonlineviagrashop.com/#12972]viagra online without prescription[/url] - cheap generic viagra , http://buygenericonlineviagrashop.com/#9232 viagra online without prescription
ОтветитьУдалить