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

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

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

5 867

Комментарии не найдены