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

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

Задача

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

jQuery плагин threesixty

Демо пример. Проверено в:

  • IE 6-8
  • Firefox 3-4
  • Opera 11
  • Safari 5
  • Chrome

Что качать?

Быстрый старт

Подключаем библиотеки, инициализируем плагин. Инициализация происходит по 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).

Материалы

По теме

Показать комментарии