» » » Воскресные сниппеты №3

Воскресные сниппеты №3

5.08
5
11 211
Воскресные сниппеты №3


Сегодня сниппет два-в-одном.
Интересный эффект всплытия картинок при наведении а уменьшенную копию на основе 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()
function 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(){ //Инициализация скрипта.
imagePreview(".miniatures img");
});




P.S. В следующей статье я расскажу как превратить этот сниппет в универсальный плагин и прикрутить к DLE

Похожие материалы

Комментарии

Yamakasi
Yamakasi 6 августа 2012 08:39
в демке при наведение на одну и тужу фотку несколько раз выходит разные фотки, так и должно быть?
ПафНутиЙ
ПафНутиЙ 6 августа 2012 09:19
Да, может такое быть. фотки грузятся с lorempixel.com, а скрипт при наведении на миниатюру считывает адрес увеличенной фотки и вставляет в тег img, так что это нормально)
Yamakasi
Yamakasi 6 августа 2012 19:09
ошибку в описание так и не исправили, на которую я указал!
ПафНутиЙ
ПафНутиЙ 6 августа 2012 21:25
Поправил, я в админку не всегда захожу)
Chessman
Chessman 23 ноября 2016 09:57
Можно реализовать для thumb в DLE?

Добавить комментарий

Комментировать могут только зарегистрированные пользователи

Информация

Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.