Круглая галерея с использованием 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.
Запишем в обобщенном виде формулы для вычисления координат, чтобы использовать их при позиционировании наших элементов:
- x = centerX + Math.cos(radians) * radius;
- 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:
- x = p + a * cos(t) * cos(k) – b * sin(t) * sin(k)
- 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. Плагин будет обладать достаточной гибкостью для того, чтобы:
- Давать возможность пользователю строить интересные интерфейсы.
- Давать возможность пользователю добавлять столько изображений, сколько нужно, и просто настраивать радиус окружности.
- Иметь завершенную модель событий для взаимодействия с содержанием окружности и возможностью конфигурирования.
Как работает 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. Галерея изображений с просмотром полноразмерного изображения.
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/bJoURQ_B1lI/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-09-30 » Как быстро запустить Laravel на Windows
- 2024-09-25 » Next.js
- 2024-09-05 » OpenAI рассказал, как запретить ChatGPT использовать содержимое сайта для обучения
- 2024-08-28 » Чек-лист: как увеличить конверсию интернет-магазина на примере спортпита
- 2024-08-01 » WebSocket
- 2024-07-26 » Интеграция с Яндекс Еда
- 2024-07-26 » Интеграция с Эквайринг
- 2024-07-26 » Интеграция с СДЕК
- 2024-07-26 » Интеграция с Битрикс-24
- 2024-07-26 » Интеграция с Travelline
- 2024-07-26 » Интеграция с Iiko
- 2024-07-26 » Интеграция с Delivery Club
- 2024-07-26 » Интеграция с CRM
- 2024-07-26 » Интеграция с 1C-Бухгалтерия
- 2024-07-24 » Что такое сторителлинг: техники и примеры
- 2024-07-17 » Ошибка 404: что это такое и как ее использовать для бизнеса
- 2024-07-03 » Размещайте прайс-листы на FarPost.ru и продавайте товары быстро и выгодно
- 2024-07-01 » Профилирование кода в PHP
- 2024-06-28 » Изучаем ABC/XYZ-анализ: что это такое и какие решения с помощью него принимают
- 2024-06-17 » Зачем вам знать потребности клиента
- 2024-06-11 » Что нового в работе Яндекс Метрики: полный обзор обновления
- 2024-06-11 » Поведенческие факторы ранжирования в Яндексе
- 2024-06-11 » Скорость загрузки сайта: почему это важно и как влияет на ранжирование
- 2024-05-27 » Подборка сервисов для расшифровки аудио в текст
- 2024-05-27 » PostgreSQL 16. Изоляция транзакций. Часть 2
- 2024-05-06 » Как настраивать конверсионные стратегии: работа над ошибками
- 2024-04-22 » Комментирование кода и генерация документации в PHP
- 2024-04-22 » SEO в России и на Западе: в чем основные отличия
- 2024-04-22 » SEO для международного масштабирования
- 2024-04-22 » Как использовать XML-карты для продвижения сайта
Секрет быть несчастным: иметь время занудствовать на тему, счастлив ты или нет Шоу Джордж Бернард - (1856-1950) - английский писатель. В своем творчестве ниспровергал догматизм и предвзятость, традиционность представлений |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.