Плагин 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..jpg'
        });
    });
</script>

Особенности

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

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

Панорама

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

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

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

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

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

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

$('#buil').wbtRotator({
    frameSrc: 'sample/building..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
});

Опции

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

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