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

27 ноября 2014 Антон Кулешов 2182 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
Читайте далее

Simple SEO for WordPress

15 мая 2016 Антон Кулешов

Как изменить title у заметки WordPress? – Вопрос весьма актуальный. WordPress не включает в свой стандартный функционал возможности изменения title страниц, а также нет ни каких вариантов для добавления мета тегов description и keywords, которые необходимы для настройки SEO. Хотя эту проблему можно решить при помощи Yoast SEO или All in One SEO - одних из самых популярных плагинов в данной области, однако, из-за обилия настроек и сторонней рекламы, я решил написать свой простенький вариант к примеру для блога.

Прогресс бар заполнения формы

15 июня 2016 Антон Кулешов

Необходимость заполнения длинных форм, зачастую, очень не нравится пользователям. Чтобы как-то снивелировать негативный эффект можно прикрепить к форме анимированный прогресс бар её заполнения. Сегодня речь пойдёт об JavaScript библиотеке под названием fort.

Табы для сайта на jQuery

21 октября 2014 Антон Кулешов

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