Threesixty.js: атрибуты data и галерея изображений
Threesixty.js не потребует от вас много. jQuery и путь до галереи ваших изображений, к которой нужно применить обзор на 360 градусов. Следующий пример собирает 61 изображение, и отображает их в процессе вращения. Изображения названы с учетом следующего формата: номеризображения.расширение, и в нашем примере, как видно, и используется gem0.jpg, gem1.jpg,…, gem61.jpg. Изображение под номером 0 отвечает за начало показа.
<div class="threesixty" data-path="assets/img/src/gem{index}.JPG" data-count="61"></div>Div-элемент указывается внутри HTML в том месте, где вы хотите отобразить трехмерный объект. При помощи HTML5-атрибута data – в данном случае data-path и data-count – вносятся в функцию для предназначенной презентации в исходном HTML-коде.
Следующий javascript-код был использован для реализации объекта:
$(document).ready(function(){
$('.threesixty').threeSixty({
dragDirection: 'horizontal'
});
});Запуск функции может быть расширен при помощи параметров. В нашем примере мы использовали только dragDirection. Этот параметр отвечает за ось, по которой будет производиться вращение. По умолчанию, вращение начинается по горизонтали, но вы также можете реализовать и вертикальное вращение. Просто измените значение на vertical. Пока что невозможно осуществлять вращение по обеим осям одновременно.
Направление движения регулируется при помощи кнопок вперед и назад:
$('.threesixty').nextFrame();и
$('.threesixty').prevFrame();Параметры draggable и useKeys позволят вам добавить возможность перетаскивать объект, просто удерживая левую кнопку мыши, и возможность использовать кнопки для вращения объекта в соответствующие стороны. Сначала здесь была предусмотрена и поддержки вращения посредством колесика мыши, но затем разработчик Nick Jonas исключил ее.
Threesixty.js – довольно молодой проект, и последней версией на данный момент является версия 0.1.2. Ее можно скачать с GitHub и использовать бесплатно. Не забудьте использовать какую-нибудь функцию предварительной загрузки, так как неизвестно, сколько времени потребуется для загрузки 61 изображения. Даже такой простой пример требует времени на загрузки.
Ссылки
* Демо-сайт | Threesixty.js
* Репозиторий GitHub | Threesixty.js
