Как стать автором
Обновить

Вращение предметов без флэш

Время на прочтение2 мин
Количество просмотров10K
Всем привет.

Хочу предоставить вам на суд плагин для jQuery, позволяющий реализовать трехмерный показ предметов (например, телефонов или ноутбуков в каталоге интернет-магазина).

Пожалуй, все встречали подобные инструменты основанные на технологии flash. Однако я считаю, что её использование здесь не к чему. Поэтому потратив несколько часов я реализовал подобный функционал на javascript в виде плагина к jQuery.



Возможности


  • Вращение объекта мышкой, кнопками клавиатуры, кнопками на странице сайта
  • Автоматическое вращение
  • Управление скоростью вращения
  • Возможность назначить плагин на несколько объектов на странице
  • Плагин может возвращать объект, с помощью которого можно навешивать дополнительное управление и обработчики событий
  • Проверена работа под Windows XP в FF 3.5, Opera 10, IE 6+, Google Chrome, Safari 4


Как работает



Конечно же нам нужны фотографии предмета, который хотим показать.
Все они помещаются в некоторый div.

<div class="beonoGlobus">
    <div class="beonoGlobus-images">
      <img src="3d-1.jpg"/>
      ...
      <img src="3d-6.jpg"/>
    </div>
    <div class="beonoGlobus-navigation">...</div>
  </div>
</div>


* This source code was highlighted with Source Code Highlighter.


Навешиваем плагин.

$(".beonoGlobus").beonoGlobus();

* This source code was highlighted with Source Code Highlighter.


Всё это можно упаковать в какой-нибудь компонент вашей cms и подключать автоматически для каждого продукта каталога.

Где покрутить


Официальная страничка проекта
Проект на Google Code

Важно: Текущая α-версия (0.5) годится к использованию, но ещё «сыровата» для использования api объектов-плагина. Думаю до конца месяца я приведу код в порядок. Так же в планах реализовать вращение по вертикали.
© в рамках GPLv2

UPDATE start
Все аналогичные интсрументы на флэше сделаны по принципу преключения фотографий.
У меня не было задачи сделать какое-то другое 3D представление через канвасы и тому подобное.
Вам нужно показать пользователю предмет со всех сторон? Пожалуйста!
Честно говоря, я не знаю как по другому реализовать подобное.
Строить изображение через canvas? — Повесит браузер пользователя.

Примеры на флэш:

pleer.ru/3dfoto/indexf.php?p=17730
3df.ru/3d/canon-eos-350-d-kit
www.3dbin.com

Это флэш и он просто переключает картинки.
Моя задача была реализовать тоже самое без флэша!

Всем спасибо! :)

UPDATE end

В комментариях хочу узнать на сколько интересен данный инструмент (особенно как альтернатива флэш версиям), пожелания и критику.
Теги:
Хабы:
Всего голосов 118: ↑103 и ↓15+88
Комментарии103

Публикации

Истории

Работа

Ближайшие события