Вращение фото объекта
Дата публикации: 21.04.2011
Задача
Дать возможность пользователю рассмотреть объект (товар) с любой стороны без использования флеш.
jQuery плагин threesixty
Проверено в:
- IE 6-8
- Firefox 3-4
- Opera 11
- Safari 5
- Chrome
Что качать?
- blog.jquery.com/2010/02/19/jquery-142-released/ — библиотеку jQuery
- jquery.threesixty.js
Быстрый старт
Подключаем библиотеки, инициализируем плагин. Инициализация происходит по id объекта:
<script src="path-to/jquery-1.4.2.min.js"></script>
<script src="path-to/jquery.threesixty.js"></script>
<script>
$(document).ready(function(){
var arr = [],
x;
//чтобы не перечислять все имена файлов вручную, автоматизируем процесс
for (x=1; x
Параметры
| Название параметра | Описание |
|---|---|
| images | массив имен изображений (фотографий объекта с разных сторон) |
| method | по какому событию будет происходить вращение объекта. click — вращение происходит перемещением курсора мыши над объектом с зажатой клавишей мыши. mousemove — вращение происходит таким же образом, только зажимать кнопку мыши не нужно. |
| sensibility | скорость вращения, задается целым положительным числом |
| direction | зависит от того в каком порядке будут предоставлены фотографии. Возможны два значения: forward или backward |
| cycle | Настройка требуемого прохождения расстояния мышью чтобы совершить один оборот. Значение — целое число. Подбираем эксперементально. |
Заметка
Картинки могут иметь любые имена. Перечислять их в параметре тогда нужно будет примерно так: var arr = [«pic/photo1.jpg», «pic/photo2.jpg», «pic/photo-speredi.jpg»]. Но если файлы назвать в формате префикс+номер (или просто номер), тогда можно себе облегчить задачу и заполнить массив программно, как и сделано в демо примере.
Недостатком данного плагина является его свежесть и соответственно малое число доступных настроек. Лично мне не хватало контролов управления для вращения. Поэтому немного доработал плагин: добавил значение controls для параметра method, которое означает что вращение будет производится по нажатию на кнопки.
Другие решения
threesixty — решение не единственное и не самое лучшее. Но это решение может послужить основой для чего-то подобного как AJAX-ZOOM (его тут подробно не расписываю, т.к. оно основано на связке PHP + Javascript).
Материалы
- www.mathieusavard.info/threesixty/demo/ — 360 panorama for Jquery
- www.ajax-zoom.com/examples/example15.php — AJAX-ZOOM — 3D Spin & Zoom Example