Плагин Rotator

17 июля 2013
Плагин Rotator

Наконец-то дошли руки рассказать о нашем плагине Rotator для jQuery. Он дает возможность мышкой или касанием прокручивать наборы кадров, что позволяет демонстрировать на сайте панорамы, трехмерные визуализации объектов, которые можно вращать на 360° по одной из осей, и даже видеоролики. В отличие от аналогов на Flash, плагин работает на всех тач-устройствах, легко подключается и конфигурируется.

Впервые мы использовали Rotator на модели человеческого черепа на сайте компании Visual Science.

В общем случае код подключения и инициализации плагина выглядит так.

<link rel="stylesheet" href="/wbt.rotator.css"><script src="/wbt.rotator.js"></script><script>$(function(){    $("#any-jq-selector").wbtRotator({frameSrc: "sample/path.{{60}}.jpg"});});</script>

Особенности

  • Легко подключается на сайт, достаточно иметь набор статических кадров.
  • Не требуется Flash или какие-либо другие плагины.
  • Работает с мышкой и тачскринами на любых операционных системах и устройствах.
  • Для работы требуется библиотека jQuery 1.7+.

Несколько примеров, раскрывающих возможности плагина

Панорама

Одно из возможных применений — панорамы географических объектов или помещений. На этой панораме Сингапур (за снимки благодарим сайт AirPano). Загрузка изображений происходит автоматически после события onLoad страницы. Курсор — рука. Прокрутка кадров работает и при помощи скролла. Путь к изображениям задается простым шаблоном. Суммарный размер всех кадров: 2304кб.

Код инициализации этого примера.

$("#sing").wbtRotator({    frameSrc: "sample/singapore-panaram.{{94}}.jpg",    cursor: "grab"});

Трехмерный объект

На месте этого невзрачного домика может быть автомобиль, телефон, любой товар, который вы хотите показать трехмерным. Загрузка кадров не начинается, пока не сделан клик (тап) по обложке. Затем выводится индикатор, который исчезает и делает объект активным только после загрузки всех кадров. Суммарный размер всех кадров: 1205кб.

Код инициализации этого примера.

$("#buil").wbtRotator({    frameSrc: "sample/building.{{59}}.jpg",    invertMouse: true,    autoLoad: false});

Видеоролик

Шутки ради, видео про кота. Этот режим может использоваться, например, для рекламных роликов. В качестве обложки выбран один из кадров. Загружается после клика. Играет по кругу. Ручное управление прокруткой кадров отключено. Суммарный размер всех кадров: 8246кб. Стоит заметить, что при отключенном ручном управлении преимущества этого решения перед обычным видео невелики (особенно в том, что касается размера видео).

Код инициализации этого примера:

$("#simo").wbtRotator({        frameSrc: "sample/simons-cat.{{584}}.jpg",        frameCover: "sample/simons-cat.200.jpg",        autoLoad: false,        rotateAuto: true,        rotateAutoSpeed: 150,        rotateManual: false});

Опции

НазваниеОписание
showLoaderПоказывать индикатор во время загрузки кадров. Boolean
frameCoverОбложка, которая будет видна, пока не загружены все кадры. String
frameSrcПути к кадрам. Единственный обязательный параметр. Может быть задан строкой или массивом строк. Массив строк напрямую используется как полный набор кадров. Одна строка рассматривается как шаблон и преобразуется в массив строк, где число в двойных фигурных скобках заменяется последовательно на все числа от нуля включительно до этого числа. Т.е. строка «/image{{10}}.jpg» будет преобразована в массив строк с десятью значениями от «/image00.jpg» до «/image09.jpg». String or Array
leadingZeroПодставлять ведущие нули в пути к кадрам, если они заданы строкой-шаблоном. Boolean
frameFirstКадр, который будет отображаться первым после загрузки всех кадров. Integer
autoLoadНачинать загрузку кадров автоматически после открытия страницы. В противном случае кадры будут загружаться только после клика по обложке. Boolean
rotateAutoСменять кадры автоматически. Движение будет приостанавливаться при клике по кадру. Boolean
rotateAutoSpeedИнтервал между сменой кадров в миллисекундах. Boolean
rotateManualРазрешать прокручивать кадры вручную. Boolean
invertMouseИнвертировать направление смены кадров при перетаскивании. Boolean
invertAxesСменять кадры при вертикальном движении указателя, а не при горизонтальном. Boolean
invertAutoRotateИнвертировать направление смены кадров при автоматической смене кадров. Boolean
enableMouseWheelСменять кадры при движении колесом мыши. Boolean
cursorКурсор. Может принимать одно из значений: «arrows», «grab». String

Скачать плагин можно в GitHub.

Если хотите убедиться, что все делаете правильно или проконсультироваться по поводу разработки вашего проекта, напишите нам.

Автор статьи
Кирилл Гришанин
Последние 10 лет руковожу командой аналитиков, дизайнеров и разработчиков

Подпишитесь на блог WB—Tech

Никакого спама, только анонсы новых статей

Наши клиенты

WBTech - Клиенты - МТС
WBTech - Клиенты - Высшая Школа Экономики
WBTech - Клиенты - Лента
WBTech - Клиенты - Верный
WBTech - Клиенты - Рамблер
WBTech - Клиенты - Совкомбанк
WBTech - Клиенты - Билайн
WBTech - Клиенты - Леруа Мерлен
WBTech - Клиенты - Ульяна Сергеенко
WBTech - Клиенты - Правительство Москвы
ИП Гришанин Кирилл Олегович
ИНН 774313842609
Коворкинг Starthub
Б. Новодмитровская ул., 36, стр. 12, вход 6, Москва, Россия, 127015
Коворкинг Wework
Ahad Ha'am 54, Tel Aviv-Yafo, Израиль