Эпиграф в стиле tumblr (перевод windymind)
Elastic Thumbnail Menu
Демо версия - клик.
Инструкция:
1) Откройте HTML-код страницы. Между тегами <head> вставьте следующее:
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.menuitem img').animate({width: 100}, 0);
$('.menuitem').mouseover(function(){
; gridimage = $(this).find('img');
gridimage.stop().animate({width: 200}, 150);
}).mouseout(function(){
gridimage.stop().animate({width: 100}, 150);
});
});
</script>Размер превью по умолчанию — 100*100 пикселей. Если вы хотите его изменить, вы должны указать свой размер в четвертой строке:
$('.menuitem img').animate({width: 100}, 0);
То же самое относится к оригинальному изображению. Максимальный размер — это 200 пикселей:
gridimage.stop().animate({width: 200}, 150);
2) Теперь нужно подключить к плагину CSS-стиль. Без него линия превью и изображений будет смотреться неопрятно. В <head> страницы вставьте следующее:
<style type="text/css">
img {
border: none;
}
#menuwrapper{
left: 20%;
position: relative;
height: 210px;
}
#menu{
position: absolute;
bottom: 0px;
left: 0px;
}
.menuitem {
position: fixed relative;
bottom: 0px;
display: inline-block;
}
</style>height: 210px; — это высота линии. Если ваши изображения (в оригинальном размере) больше 200 пикселей, измените это значение.
3) Осталось только поместить сам плагин на страницу. Для этого, между тегами <body>, в место, где должен отображаться плагин вставьте следующий код:
<div id="menuwrapper"> <div id="menu"> <a href="http://" class="menuitem"><img src="URL"></a> <a href="http://" class="menuitem"><img src="URL"></a> <a href="http://" class="menuitem"><img src="URL"></a> <a href="http://" class="menuitem"><img src="URL"></a> </div> </div>
Не забудьте вместо URL указать ссылку на каждое изображение.
взято с monsterart.ru
