Elastic Thumbnail Menu
http://monsterart.ru/jquery/preview02.jpg
Демо версия - клик.
Инструкция:
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

Теги: script