Показать Меню
falbar Плавное увеличение картинок

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

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

Если Вы хотите сделать свою галерею динамичной и интересной, то предлагаю воспользоваться 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 картинки в обычном режиме.

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

Подписаться на обновления

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