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

Очень часто галереи, заряженные jQuery, представляют собой весьма простой шаблон - изображения или содержание располагается линейно или в прямоугольнике. Привычный стандартный вид, но можно сделать более интересную альтернативу – вывести изображения или пункты меню по кругу или эллипсу. В данном уроке как раз и будет построена такая галерея с использованием плагина jQuery Roundrr.

Также будет продемонстрирована техника генерации координат для позиционирования изображений с помощью JavaScript без использования HTML5 или CSS3. Преимуществом такого подхода является кросс-браузерность решения уже сегодня.

Прежде чем начать разбираться в коде, предлагаю взглянуть на демонстрационные примеры. Для навигации можно использовать клавиши-стрелки вправо и влево.

 

Введение

Наш урок будет поделен на две части. Часть первая посвящена погружению в концепцию получения координат для изображений галереи. Часть вторая описывает использование плагина jQuery Roundrr и созданию интерактивной галереи с помощью jQuery и CSS.

 

Часть 1 – Координаты на основе геометрических фигур

Позиционирование на основе координат

В большинстве языков программирования , которые работают с визуальным выводом, для позиционирования объектов на экране используется концепция координат X и Y. Таким образом, презентационному слою или интерпретатору (в случае использования браузера) можно указать конкретное место, где нужно расположить элемент на экране.

Пример 1. Когда создается контейнер div, центрируется и заполняется списком изображений, а определенное положение для элементов не задается, то браузер проводит все вычисления за вас.

Пример 2. Если браузеру указать, что каждое изображение из списка располагается в определенной позиции (с помощью свойств margin-left и margin-top), то над позиционированием устанавливается полный контроль. В нашем проекте будут использоваться именно укзазанные два свойства CSS.

Как позиционировать элементы по окружности

Разберемся с математикой, которая помогает сформировать окружность. Все просто. Допустим, что у нас есть окружность с центром в точке (j,k) и радиусом r. Координаты x и y любой точки окружности вычисляются следующим образом

x(t) = r cos (t) + j, y(t)  = r sin(t) + k.

Запишем в обобщенном виде формулы для вычисления координат, чтобы использовать их при позиционировании наших элементов:

  1. x = centerX + Math.cos(radians) * radius;  
  2. y = centerY + Math.sin(radians) * radius;  

где radians =  (угол_внутри_окружности/180) * Math.PI. centerX - координата X центра окружностина нашей странице, а centerY - координата Y.

Код, который использует математику в JavaScript и позиционирует элементы по окружности приведен ниже:

/*
   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');
    });
   }

Позиционирование по эллипсу

Теперь перейдем к более интересной фигуре - эллипсу. Эллипс -двумерная замкнутая фигура, а наглядным примером эллипса является овал. Формулы для расчета координат точки эллипса расположенной на угле k:

  1. x = p + a * cos(t) * cos(k) – b * sin(t) * sin(k)  
  2. y = q + b * sin(t) * cos(k) + a * cos(t) * sin(k)  

Где a и b - два отрезка, которые описывают кривую, а  p и q определяют центр/смещение эллипса относительно страницы. Вот код JavaScript, который выводит содержание селектора по эллипсу:

/*
   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');
        });
}

Набор демонстраций: позиционирование изображений по окружности и эллипсу

В демонстрациях используется маленькая библиотека jsShapeLib, которая помогает вычислить координаты заданной окружности или эллипса. Нужно только вызвать функции drawCircle() или drawEllipse() с соответствующими параметрами.

Демонстрация №1. Вывод элементов по окружности.

Демонстрация №2. Вывод элементов по эллипсу.

Демонстрация №3. Галерея с возможностью просмотра полноразмерного изображения.

 

Часть 2 – плагин jQuery Roundrr

Теперь мы умеем выводить изображения по окружности, но что дальше? Отрыв от концепции прямоугольника открывает новые перспективы в построении интерфейсов.

Давайте построим галерею, в которой миниатюры будут перемещаться по окружности, а активное изображение будет выводиться в центре. Возьмем  библиотеку jsShapeLib и разовьём ее до плагина. jQuery.  Плагин будет обладать достаточной гибкостью для того, чтобы:

  1. Давать возможность пользователю строить интересные интерфейсы.
  2. Давать возможность пользователю добавлять столько изображений, сколько нужно, и просто настраивать радиус окружности.
  3. Иметь завершенную модель событий для взаимодействия с содержанием окружности и возможностью конфигурирования.

Как работает Roundrr?

Плагин Roundrr использует обычный список изображений и трансформирует его соответствующим образом. Он поддерживает два режима, которые можно использовать в зависимости от необходимости – большинство пользователей будет удовлетворено режимом ‘standard’, а для дополнительных возможностей включается режим‘pick’.

Для расширения функционала плагина Roundrr используется модель событий. Плагин обеспечивает возможность вывода и анимации перемещения элементов в любом направлении, но большинство функций взаимодействия с пользователем (например, вывод полноразмерного изображения или дополнительной информации) выполняется вне плагина. Таким образом, обеспечивается гибкость настройки плагина.

Рассмотрим, как реализовать режим работы ‘Pick’

Как запустить режим ‘Pick’

Шаг 1. Загружаем библиотеки.

< 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'>

Шаг 2. HTML

<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>

Шаг 3. JavaScript

Здесь производится инициализация плагина с помощью функции .roundrrwheel() и устанавливается конфигурация опций.

         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);
				});
			}
		});

Дополнительные функции

Ниже приведен пример дополнительных функций которые вызываются при различных событиях. Здесь осуществляется вывод полноразмерного изображения при нажатии на миниатюру и анимация перемещения с помощью функций next() и prev(). Также устанавливаются обработчики событий клавиатуры.

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;
		     } });
	  });

Демонстрация № 4. Галерея изображений.

Демонстрация № 5. Галерея изображений с просмотром полноразмерного изображения. 

Демонстрация № 6. Автоматическое прокручивание.

Демонстрация № 7. Подключение к Твиттеру.

Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/bJoURQ_B1lI/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Круглая галерея с использованием jQuery | | 2012-06-19 12:08:12 | | Статьи Web-мастеру | | Очень часто галереи, заряженные jQuery, представляют собой весьма простой шаблон - изображения или содержание располагается линейно или в прямоугольнике. Привычный стандартный вид, но можно сделать | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: