Слайдер миниатюр с помощью jQuery

<ul class="ts_container">
	<li><a href="#">Image 1</a></li>
	<li><a href="#">Image 2</a></li>
	<li><a href="#">Image 3</a></li>
	<li><a href="#">Image 4</a></li>
	<li><a href="#">Image 5</a></li>
	<li><a href="#">Image 6</a></li>
	<li><a href="#">Image 7</a></li>
	<li><a href="#">Image 8</a></li>
	<li><a href="#">Image 9</a></li>
	<li><a href="#">Image 10</a></li>
	<li class="ts_thumbnails">
		<div class="ts_preview_wrapper">
			<!-- Список миниатюр -->
		</div>
		<span></span>
	</li>
</ul>

<ul class="ts_preview">
	<li><img src="/images/thumbs1/1.jpg" alt="Thumb 1" /></li>
	<li><img src="/images/thumbs1/2.jpg" alt="Thumb 2" /></li>
	<li><img src="/images/thumbs1/3.jpg" alt="Thumb 3" /></li>
	<li><img src="/images/thumbs1/4.jpg" alt="Thumb 4" /></li>
	<li><img src="/images/thumbs1/5.jpg" alt="Thumb 5" /></li>
	<li><img src="/images/thumbs1/6.jpg" alt="Thumb 6" /></li>
	<li><img src="/images/thumbs1/7.jpg" alt="Thumb 7" /></li>
	<li><img src="/images/thumbs1/8.jpg" alt="Thumb 8" /></li>
	<li><img src="/images/thumbs1/9.jpg" alt="Thumb 9" /></li>
	<li><img src="/images/thumbs1/10.jpg" alt="Thumb 10" /></li>
</ul>

ul.ts_container{
	list-style:none;
	margin:0;
	padding:0;
	width:170px;
	margin:20px auto;
	position:relative;
	height:17px;
}

ul.ts_container li{
	float:left;
}

ul.ts_container li a{
	display:block;
	text-indent:-9000px;
	width:11px;
	height:11px;
	outline:none;
	padding:0px 3px;
	background:transparent url(../images/sliderIcons/dot.png) no-repeat top center;
}

ul.ts_container li a:hover,
ul.ts_container li.selected a{
	background-position:50% -11px;
}

ul.ts_container li.ts_thumbnails{
	display:none;
	position:absolute;
}

ul.ts_container li.ts_thumbnails span{
	background:transparent url(../images/sliderIcons/triangle.png) no-repeat top center;
	width:15px;
	height:6px;
	position:absolute;
}

.ts_preview_wrapper{
	border:5px solid #fff;
	overflow:hidden;
	position:relative;
	-moz-box-shadow:0px 0px 5px #999;
	-webkit-box-shadow:0px 0px 5px #999;
	box-shadow:0px 0px 5px #999;
}

ul.ts_preview{
	position:absolute;
	left:0px;
	top:0px;
	margin:0;
	padding:0;
	list-style-type:none;
}

ul.ts_preview li{
	float:left;
}

ul.ts_preview li img{
	display:block;
}

(function($) {
	$.fn.thumbnailSlider = function(options) {
		var opts = $.extend({}, $.fn.thumbnailSlider.defaults, options);
		return this.each(function() {
			...
		});
	};
	$.fn.thumbnailSlider.defaults = {
		speed		: 100, //скорость анимации
		easing		: 'jswing', //эффект смягчения
		thumb_width	: 75, //ширина изображений
		thumb_height: 75, //высота изображений
		zoom		: false, //увеличение изображений
		zoomratio	: 1.3, //коэффициент увеличения (должен быть > 1)
		zoomspeed	: 15000, //скорость увеличения масштаба
		onClick		: function(){return false;} //при клике - callback
	};
})(jQuery);

var $this 				= $(this),
	o 					= $.meta ? $.extend({}, opts, $pxs_container.data()) : opts;

var $ts_container		= $this.children('.ts_container'),
	$ts_thumbnails		= $ts_container.children('.ts_thumbnails'),
	$nav_elems			= $ts_container.children('li').not($ts_thumbnails),
	total_elems			= $nav_elems.length,
	$ts_preview_wrapper	= $ts_thumbnails.children('.ts_preview_wrapper'),
	$arrow				= $ts_thumbnails.children('span'),
	$ts_preview			= $ts_preview_wrapper.children('.ts_preview');

/*
вычисляем размеры $ts_thumbnails:
width 	-> ширина миниатюры + ширина рамки (2*5)
height 	-> высота миниатюры + ширина рамки + высота треугольника(6)
top		-> -(высота + отступ 5 пикселей)
left	-> leftDot - 0.5*width + 0.5*widthNavDot
	будет установлено при наведении на точку,
	и значение по умолчанию будет соответствовать первому nav dot
*/
var w_ts_thumbnails	= o.thumb_width + 2*5,
	h_ts_thumbnails	= o.thumb_height + 2*5 + 6,
	t_ts_thumbnails	= -(h_ts_thumbnails + 5),
	$first_nav		= $nav_elems.eq(0),
	l_ts_thumbnails	= $first_nav.position().left - 0.5*w_ts_thumbnails + 0.5*$first_nav.width();

$ts_thumbnails.css({
	width	: w_ts_thumbnails + 'px',
	height	: h_ts_thumbnails + 'px',
	top		: t_ts_thumbnails + 'px',
	left	: l_ts_thumbnails + 'px'
});

	/*
вычисляем значения top и left треугольника
top		-> высота миниатюры + ширина рамки(2*5)
left	-> (ширина миниатюры + ширина рамки)/2 - (ширина треугольника)/2
*/
var t_arrow	= o.thumb_height + 2*5,
	l_arrow	= (o.thumb_width + 2*5) / 2 - $arrow.width() / 2;
$arrow.css({
	left	: l_arrow + 'px',
	top		: t_arrow + 'px',
});

/*
вычисляем ширину $ts_preview -> ширина миниатюры * количество миниатюр
*/
$ts_preview.css('width' , total_elems*o.thumb_width + 'px');

$ts_preview_wrapper.css({
	width	: o.thumb_width + 'px',
	height	: o.thumb_height + 'px'
});

$nav_elems.bind('mouseenter',function(){
	var $nav_elem	= $(this),
		idx			= $nav_elem.index();

	/*
	вычисляем новое значение left
	для $ts_thumbnails
	*/
	var new_left	= $nav_elem.position().left - 0.5*w_ts_thumbnails + 0.5*$nav_elem.width();

	$ts_thumbnails.stop(true)
				  .show()
				  .animate({
					left	: new_left + 'px'
				  },o.speed,o.easing);				  

	$ts_preview.stop(true)
			   .animate({
					left	: -idx*o.thumb_width + 'px'
			   },o.speed,o.easing);

	//увеличиваем размер миниатюры, если zoom = true
	if(o.zoom && o.zoomratio > 1){
		var new_width	= o.zoomratio * o.thumb_width,
			new_height	= o.zoomratio * o.thumb_height;

		//увеличиваем ширину $ts_preview
		var ts_preview_w	= $ts_preview.width();
		$ts_preview.css('width' , (ts_preview_w - o.thumb_width + new_width)  + 'px');

		$ts_preview.children().eq(idx).find('img').stop().animate({
			width		: new_width + 'px',
			height		: new_height + 'px'
		},o.zoomspeed);
	}		

}).bind('mouseleave',function(){
	//устанавливаем значения ширины и высоты по умолчанию
	if(o.zoom && o.zoomratio > 1){
		var $nav_elem	= $(this),
			idx			= $nav_elem.index();
		$ts_preview.children().eq(idx).find('img').stop().css({
			width	: o.thumb_width + 'px',
			height	: o.thumb_height + 'px'
		});
	}

	$ts_thumbnails.stop(true)
				  .hide();

}).bind('click',function(){
	var $nav_elem	= $(this),
		idx			= $nav_elem.index();

	o.onClick(idx);
});

$('#demo4').thumbnailSlider({
	thumb_width	: 174,
	thumb_height: 260,
	speed		: 200,
	zoom		: true,
	zoomspeed	: 10000,
	zoomratio	: 1.7
});