Вращение фото объекта

Автор: Евгений Рыжков Дата публикации:

Задача

Дать возможность пользователю рассмотреть объект (товар) с любой стороны без использования флеш.

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

По теме

jQuery панорама

Xiper