Главная/ Собираем HTML и CSS приемы/ Веб без flash/ Effect 3d/ Вращение фото объекта на Javascript

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

Дата публикации: 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

Параметры

Название параметра Описание
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).

Материалы

По теме

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