Наконец-то дошли руки рассказать о нашем плагине 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.