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