Плавное увеличение картинок при наведении курсора

27 ноября 2014 Антон Кулешов 2297 0

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

Реклама

При работе с hoverpulse, я не заметил никаких конфликтов, все изображения сменяют друг друга плавно и своевременно. Чтобы начать использовать данное решение вам необходимо подключить библиотеку jQuery и сам скрипт.

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

Теперь добавляем на страницу HTML разметку:

<div id="thumbs">
	<div class="thumb">
		<img src="img/beach1.jpg" width="100" height="100" />
	</div>
	<div class="thumb">
		<img src="img/beach2.jpg" width="100" height="100" />
	</div>
	<div class="thumb">
		<img src="img/beach3.jpg" width="100" height="100" />
	</div>
	<div class="thumb">
		<img src="img/beach4.jpg" width="100" height="100" />
	</div>
	<div class="thumb">
		<img src="img/beach5.jpg" width="100" height="100" />
	</div>
	<div class="thumb">
		<img src="img/beach6.jpg" width="100" height="100" />
	</div>
	<div class="thumb">
		<img src="img/beach7.jpg" width="100" height="100" />
	</div>
	<div class="thumb">
		<img src="img/beach8.jpg" width="100" height="100" />
	</div>
	<div class="thumb">
		<img src="img/beach9.jpg" width="100" height="100" />
	</div>
</div>

Последний шаг это вызвать hoverpulse:

$(function(){
	$("div.thumb img").hoverpulse();
});

После этого вы увидите довольно неприятную картину, все изображения окажутся внахлёстку друг на друга. Не пугайтесь - это легко можно исправить. Суть в том, что плагин добавляет абсолютное позиционирование к картинкам. Нам стоит только задать размеры обертке и всё станет на свои места, в нашем случае 100x100.

Добавим ещё несколько CSS правил, чтобы всё выглядело красиво:

#thumbs{
	margin: 75px auto 0;
	width: 306px;
	height: 198px;
}
div.thumb{
	float: left;
	padding: 1px;
	width: 100px;
	height: 100px;
}
div.thumb img{
	border: 2px solid white;
}

После этого вы увидите очень плавное увеличение картинок до указанных размеров. У скрипта есть несколько своих настроек:

  • size – размер, на который происходит увеличение;
  • speed – скорость увеличения;
  • zIndexActive – z-index активной картинки;
  • zIndexNormal – z-index картинки в обычном режиме.

Вот так вы можете легко и быстро улучшить свою галерею, а на этом у меня всё.

Реклама
Комментариев еще не оставлено
no_avatar