Круглая галерея с использованием jQuery

/*
   drawCircle()
   selector : селектор jQuery, который определяет элемент или массив элементов
   center : центр окружности
   radius : радиус окружности
   angle: угол внутри окружности
   x: смещение влево всех точек окружности
   y: смещение по вертикали всех точек окружности

   Использование:
   CSS: .box { background-color:red; height:90px; width:90px;  position:absolute; margin:5px;}
   JS:drawCircle('.box', 50, 200, 90, 310, 220);
*/
    function drawCircle(selector, center, radius, angle, x, y)
    {
    var total = $(selector).length;
    var alpha = Math.PI * 2 / total;
    $(selector).each(function(index)
    {
        var theta = alpha * index;
        var pointx  =  Math.floor(Math.cos( theta ) * radius);
        var pointy  = Math.floor(Math.sin( theta ) * radius );
        // Выводим координаты X и Y
        $(this).css('margin-left', pointx + x + 'px');
        $(this).css('margin-top', pointy  + y  + 'px');
    });
   }

/*
   drawEllipse()
   selector : селектор jQuery, который определяет элемент и массив элементов
   x: смещение влево всех точек эллипса 
   y: смещение вниз всех точек эллипса 
   a: высота эллипса 
   b: ширина эллипса 
   angle: угол внутри эллипса 

   Использование:
   CSS: .box { background-color:red; height:60px; width:60px;  position:absolute; margin:5px;}
   JS:drawEllipse(".box", 230,300, 200, 350, 360);
*/
function drawEllipse(selector, x, y, a, b, angle)
{
        var steps = $(selector).length;
        var i = 0;
        var beta = -angle * (Math.PI / 180);
        var sinbeta = Math.sin(beta);
        var cosbeta = Math.cos(beta);
        $(selector).each(function(index)
        {
        i+= (360/steps);
        var alpha = i * (Math.PI / 180) ;
        var sinalpha = Math.sin(alpha);
        var cosalpha = Math.cos(alpha);
        var X = x + (a * cosalpha * cosbeta - b * sinalpha * sinbeta);
        var Y = y + (a * cosalpha * sinbeta + b * sinalpha * cosbeta);
        X = Math.floor(X);
        Y = Math.floor(Y);
	//Выводим координаты X и Y
	$(this).css('margin-top', X + 'px');
        $(this).css('margin-left', Y + 'px');
        });
}

< script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
< script type='text/javascript' src='jQuery.roundrr.js'>

<div class="container">

   <!-- Центральное изображение -->
   <div class="roundrr_center">
   </div>
   
   <!-- Панель для названия -->
   <div class="roundrr_speech">
   </div>
 
  
   <!-- Текст названия -->
   <div id="roundrr_caption">
   </div>
   
   <!-- Выделение текущего изображения -->
   <div id="roundrr_pick">
   </div>
 
  
   <!-- Контейнер с изображениями -->
	<div id='roundrr_container'>
		<ul class='list'>
		
			<li class='item'>	
				<div class='my_class'> 
					<img alt="Ал Янкович" src="http://a0.twimg.com/profile_images/246073324/IL2_bigger.jpg"></img> 
				</div>	
			</li>

	        	<li class='item'>	
				<div class='my_class'>  
					<img  alt="Тейлор Свифт" src="http://a0.twimg.com/profile_images/390558464/Photo_190_bigger.jpg"></img>
				</div>
			</li>

			. . .
				
		</ul>
	</div>
	
	
	
	
  
  </div>

         var currentImage = "";
         var interfaceLock = false;
	  	jQuery("#roundrr_container").roundrrwheel(
	  	{
			mode: 'pick', //режим, может быть pick или standard
			autoplay: false,
			autoplayDirection: 'anticlockwise',
			autoplayDuration: 4000,
			centerClass: 'roundrr_center',
			listClass: 'list',
			itemClass: 'item',
			radius: 220,
			animSpeed:400,
			centerX: 29,
			centerY: 60,
			animationEffect: 1, //(1:выключено, 5:слабый,10:сильный, 15:умеренный)
			selectEvent: "click",
			centerImageSrc: "images/placeholder2.png",
			//Функция вызывается при выборе элемента 
			onSelect: function($selected)
			{
				showLargeImage($selected, 'noanim');
			},
			//Функция вызывается перед выполнением анимации перехода к следующему элементу
			onNextBegin: function($m)
			{
			   interfaceLock = true;
			},
                        //Функция вызывается перед выполнением перехода к предыдущему элементу
			onPrevBegin: function($m)
			{
			   interfaceLock = true;
			},
			//Функция вызывается, как только изображение попадет в "пик"
			onImageFocus: function($item)
			{
                          showLargeImage($item, 'none');
			},
			//Функция вызывается, как только изображение покидает "пик"
			onImageBlur:  function($item)
			{
			},
			//Функция вызывается послед завершения анимации
			onAnimationComplete: function($menu)
			{
			     jQuery('.centerImage').attr('src', currentImage);
			     jQuery('.centerImage').load(function()
			     {
			        interfaceLock = false;
			     });
			},
			angleOffset: Math.PI,
			//Функция вызывается один раз при выводе элементов на экран 
			onShow: function($menuitems)
			{
				$menuitems.each(function(i)
				{
					var $this = jQuery(this);
					$this.delay(i*100).fadeIn(500);
				});
			}
		});

Query("#roundrr_container").roundrrwheel("show"); //инициализация

		$('#next').bind('click', spinMenuRight);
		$('#prev').bind('click', spinMenuLeft);

		function showLargeImage($i, mode)
		{
			interfaceLock = true;
			var thisImage   = $i.find('img');
			var focusedImage = thisImage.attr('src');
            		var largerImage = focusedImage.replace('_bigger', '');
            		var imageCaption = thisImage.attr('alt');
            		var speechBubble =  jQuery('.roundrr_speech');
            		speechBubble.fadeIn();
            		currentImage = largerImage;
            		jQuery('#roundrr_caption').fadeIn();
			jQuery('#roundrr_caption').html(imageCaption);
            		if(mode=='noanim')
            		{
                		jQuery('.centerImage').attr('src', currentImage);
			    		 jQuery('.centerImage').load(function()
			     		{
			        		interfaceLock = false;
			     		});
            		}
		}
		   
		/*Вращение меню влево*/
		function spinMenuLeft()
		{
		   if(!(interfaceLock))
 		   {
		   	jQuery("#roundrr_container").roundrrwheel("prev");
		   }
		}
		
		/*Вращение меню вправо*/
		function spinMenuRight()
		{
		   if(!(interfaceLock))
		   {
		        jQuery("#roundrr_container").roundrrwheel("next");
		   }
		}
		
		/*Событие keydown*/
		$(window).keydown(function(event)
		{
   		   var keycode = event.keyCode;
		   switch(keycode)
			{
			  case 39:
           		  spinMenuLeft();
  				  break;
  				  case 37:
           		  spinMenuRight();
  				   break;
		     } });
	  });