Вращение фото объекта
Задача
Дать возможность пользователю рассмотреть объект (товар) с любой стороны без использования флеш.
jQuery плагин threesixty
Демо пример. Проверено в:
- IE 6-8
- Firefox 3-4
- Opera 11
- Safari 5
- Chrome
Что качать?
- библиотеку jQuery
- (5Kb)
Быстрый старт
Подключаем библиотеки, инициализируем плагин. Инициализация происходит по 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<= 30; x++) arr.push("img/MAT_" +x + ".jpg"); // инициализация плагина. #rotate - id объекта для которого проводим инициализацию $("#rotate").threesixty({images:arr, method:"mousemove", "cycle":3, direction:"backward"}); }); </script> [...] <img id="rotate" src="img/MAT_1.jpg" alt="" width="500" height="753" />
Параметры
Название параметра | Описание |
---|---|
images | массив имен изображений (фотографий объекта с разных сторон) |
method | по какому событию будет происходить вращение объекта. click — вращение происходит перемещением курсора мыши над объектом с зажатой клавишей мыши. mousemove — вращение происходит таким же образом, только зажимать кнопку мыши не нужно. |
sensibility | скорость вращения, задается целым положительным числом |
direction | зависит от того в каком порядке будут предоставлены фотографии. Возможны два значения: forward или backward |
cycle | Настройка требуемого прохождения расстояния мышью чтобы совершить один оборот. Значение — целое число. Подбираем эксперементально. |
Заметка
Картинки могут иметь любые имена. Перечислять их в параметре тогда нужно будет примерно так: var arr = ["pic/photo1.jpg", "pic/photo2.jpg", "pic/photo-speredi.jpg"]. Но если файлы назвать в формате префикс+номер (или просто номер), тогда можно себе облегчить задачу и заполнить массив программно, как и сделано в демо примере.
Недостатком данного плагина является его свежесть и соответственно малое число доступных настроек. Лично мне не хватало контролов управления для вращения. Поэтому немного доработал плагин: добавил значение controls для параметра method, которое означает что вращение будет производится по нажатию на кнопки. Смотрим демо.
(6Kb).
Другие решения
threesixty — решение не единственное и не самое лучшее. Но это решение может послужить основой для чего-то подобного как AJAX-ZOOM (его тут подробно не расписываю, т.к. оно основано на связке PHP + Javascript).
Материалы
- 360 panorama for Jquery
- AJAX-ZOOM - 3D Spin & Zoom Example