Всплывающие скриншот ссылки сайта с помощью JQuery

Скриншот ссылки

В данный момент огромное количество сервисов, которые предоставляют возможность создать скриншот (снимок экрана) сайта онлайн. Каждый из них имеет свои плюсы и минусы, некоторые утомляют временем ожидания создания снимка, некоторые используют закэшированные изображения , которые зачастую не соответствуют действительности, но есть сервисы создания скриншотов, которые радуют скоростью отдачи снимка и его адекватностью в данный момент и не искажают верстку сайта. На мое мнение, одним из лучших сервисов по созданию скриншотов любой страницы сайта в интернете предоставляет сайт S-Shot.ru

Чем же он так хорош? Короткое и внятное API, простота использования и адекватность. Удобный и простой интерфейс для создания скриншота сайта, необходимо передать адрес сайта, разрешение снимка и размер изображения получаемого в ответ(достаточно указать ширину). Для создания снимков экрана используется свободный движок WebKit, используемый в таких браузераз как: Safari, Google Chrome и т.д.

API и документация
http://mini.s-shot.ru/разрешение/размер/формат/?адрес страницы

  • адрес страницы – URL страницы сайта
  • разрешение - указывается в пикселях, например (1024x768)
  • размер - ограничивается максимальное значение высоты и ширины, масштабированной картинки
  • формат - может принимать два значения (JPEG|PNG), по умолчанию "JPEG"

Пример: http://mini.s-shot.ru/1024x768/240/jpeg/?http://miran.com.ua/

Для создания скриншот ссылок будем использовать JQuery и сервис создания скриншотов сайтов. Фреймворк JQuery очень популярен и используется на многих сайтах, его мы будем использовать для визуального отображения скриншота страницы сайта при наведении мышкой на ссылку и немного добавим стилизации снимку с помощью CSS.

Подключаем JQuery:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Добавляем скрипт для отображения скриншота на загрузку html страницы при наведении мышкой:

$(document).ready(function(){
$('a.screenshot').hover(
function(){
var path = $(this).attr('href');
$(this).append('');
},
function(){
$('img.screenshot').remove();
})});

Добавляем стилизацию снимка:

img.screenshot {
 position: absolute; 
 z-index: 100;
 border: 1px solid #CCC;
 margin-left: 10px;
 box-shadow: 0 0 10px #222222;
}

Уточнение к CSS:

box-shadow – создаст тень вокруг изображения скриншота, визуально очень хорошо смотрится, но минуc в том, что тень отработает только в браузерах с поддержкой CSS3: IE 9, Chrome 9 и выше, Opera 10.5 и выше, Safari выше 5-ой версии и Firefox выше 4-ой.

Последним штрихом будет добавления класса «screenshot» для ссылок, которым Вы хотите добавить эффект скриншот ссылок.

Пример: MIRAN

Комментарии

Gromm
Gromm IMG
17.09.2011
есть решение для box-shadow кроссбраузерное :)
MIRAN
MIRAN IMG
10.01.2012
Для отображения box-shadow в IE можно скачать с http://css3pie.com/ css3Pie и подключить его - это даст возможность использовать CSS3 в IE6+
Anrew
Anrew IMG
24.02.2012
IE6 официально умер. На последней конференции повещенной HTML5 было официальное прощание :)!
  • КОНТАКТНАЯ ИНФОРМАЦИЯ
  • E-mail:
  • ICQ: 228 000 750