Интересный эффект всплытия картинок при наведении а уменьшенную копию

Интересный эффект всплытия картинок при наведении а уменьшенную копию на основе html5 атрибута data-*. Собственно про новый (кому как) атрибут data-* я рассказывать не собираюсь, информации полным полно в сети. А вот про скрипткик, демо которого можно наблюдать чуть ниже, расскажу немного.

Как видно из демонстрации, при маленьком размере окна браузера (в разумных пределах) картинка, всплывающая при наведении на миниатюру, появляется слева от курсора, если не помещается справа.
Достигнут подобный результат довольно просто.
Первое, что делает скрипт - определяет положение, которое займёт всплывалка на странице

 function getXY(e) { //Определяем положение всплывалки на странице
	if($(window).width() - (offset *2) >= $("#preview").width() + e.pageX){
		left_pos = e.pageX+offset;
		} else {
		left_pos = e.pageX-$("#preview").width()-offset;
		}				
	top_pos = e.pageY - ($("#preview").height() / 2);	
	return {left: left_pos, top: top_pos};
}

Далее в конец body добавляем пустой див c нужным нам ID с помощью нехитрой конструкции

 $("body").append("<p id='preview'><img src='"+ $(this).data("image") +"' alt='"+$(this).attr("alt")+"' /></p>"); //Добавляем блок в конец body - именно в него будет "вставляться" наша картинка, для выбора картинки используем html5 атрибут data-
				pos = getXY(e);

в этот пустой див и будут попадать картинки, ссылки на которые мы укажем в специально заведённом атрибуте data-image.
Но т.к. картинка должна показываться только при наведении курсора на миниатюру - заворачиваем код в .hover() добавляем слежение за позицией курсора через событие .mousemove()
f

unction imagePreview(targets){
	offset = 15;
	var left_pos;
	$(targets).hover(function(e){
		$("body").append("<p id='preview'><img src='"+ $(this).data("image") +"' alt='"+$(this).attr("alt")+"' /></p>"); //Добавляем блок в конец body - именно в него будет "вставляться" наша картинка, для выбора картинки используем html5 атрибут data-
		pos = getXY(e);				
		
		$("#preview").css({left:pos.left, top:pos.top}); 
		
		$("#preview").fadeIn();				
	},
	function(){	
		$("#preview").remove();
	});
	$(targets).mousemove(function(e){
		pos = getXY(e);				
		$("#preview").css({left:pos.left, top:pos.top});
	});
}

Осталось только проинициализировать наши функции и всё, скрипт готов к бою.

$(document).ready(function(){ //Инициализация скри

Автор: ПафНутиЙ