Плагин hoverpulse — рассматриваем картинки

jQuery плагин hoverpulse — это готовое решение по увеличению каких-либо элементов (например, картинок в галерее) при наведении мыши.

Демо-пример.

Проверено в:

• IE 6-8
• Firefox 4
• Opera 9.5-10
• Safari 4
• Chrome

Что качать?

• библиотеку jquery качаем или подключаем из хранилища.
• jquery.hoverpulse.js (1.86 Kb) — сам плагин.

Быстрый старт

Подключаем библиотеки:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" ></script>
<script type="text/javascript" src="js/jquery.hoverpulse.js"></script>

Применять плагин будем к списку изображений:

<ul id="gallery">
	<li><img src="images/pic200x200-1.jpg" width="200" height="200" alt=""/></li>
	<li><img src="images/pic200x200-2.jpg" width="200" height="200" alt=""/></li>
	<li><img src="images/pic200x200-3.jpg" width="200" height="200" alt=""/></li>
</ul>

Увеличиваемый элемент (в нашем случае img) приобретет position: absolute. Это нужно учесть. Чтобы элементы списка не схлопнулись, пропишем им размеры:

#gallery li {
	float: left; /* выстраиваем картинки в линию */
	margin: 5px; /* отступ для красоты */
	width: 200px;
	height: 200px;
}

Инициализируем плагин:

<script type="text/javascript">
jQuery(document).ready(function() {
	jQuery('#gallery img').hoverpulse();
});
</script>

А теперь подробнее

При инициализации, можно передавать следующие параметры:

Параметры hoverpulse

Пример инициализации с параметрами

Меняем скорость анимации и величину прироста размера картинки.

<script type="text/javascript">
jQuery('#gallery img').hoverpulse({
       size: 40,  
       speed: 400 
});
</script>

Зачем мне этот плагин?

Сама по себе задача увеличения размера при наведении достаточно проста и может возникнуть резонный вопрос, а зачем вообще подключать какой-то плагин? Ведь все можно достаточно быстро написать самому.

Действительно, задаем элементу position: absolute, сдвигаем его и увеличиваем на нужное количество пикселей. Да, еще нужно позаботиться о корректном z-index, чтобы увеличенный элемент перекрыл остальных. И все дела.

Вот как раз именно все это плагин и делает. Тут нет ничего лишнего. Просто весь код уже написан за тебя. Именно поэтому его можно смело использовать — экономь свое время!

Саперные работы

В коде плагина есть небольшая мина замедленного действия. Не пугайся, сейчас мы ее обезвредим.

Потенциальная проблема состоит в том, что ie6-7 по своему трактуют z-index. Hoverpulse пытается вывести активный элемент на первый план методом присвоения его родителю высокого z-index. В случае, когда картинки лежат непосредственно в li (как в нашем примере), все будет хорошо. А что если img будут вложены в ссылку?

<ul id="gallery">
	<li><a href="#"><img src="images/pic200x200-1.jpg" width="160" height="160" alt=""/></a></li>
	<li><a href="#"><img src="images/pic200x200-2.jpg" width="160" height="160" alt=""/></a></li>
</ul>

Так уж вышло, что плагин присвоит большой z-index именно ссылке-родителю. И в IE6-7 картинка не выйдет на первый план.

Что же делать? Самое простое решение — найти в коде плагина две строки, отвечающие за z-index…

$this.parent().css('z-index', opts.zIndexActive);
$this.parent().css('z-index', opts.zIndexNormal);

…и подкорректировать их:

$this.parent().parent().css('z-index', opts.zIndexActive);
$this.parent().parent().css('z-index', opts.zIndexNormal);

Еще раз повторюсь, делать это нужно только если непосредственные родители масштабируемого элемента не являются друг для друга сестринскими.

Материал

• jquery plugin :: hoverpulse

По теме

• Плагин jQuery cloud-zoom (лупа)