Pull to refresh

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

Reading time 2 min
Views 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

В комментариях хочу узнать на сколько интересен данный инструмент (особенно как альтернатива флэш версиям), пожелания и критику.
Tags:
Hubs:
+88
Comments 103
Comments Comments 103

Articles