Всем привет.
Хочу предоставить вам на суд плагин для jQuery, позволяющий реализовать трехмерный показ предметов (например, телефонов или ноутбуков в каталоге интернет-магазина).
Пожалуй, все встречали подобные инструменты основанные на технологии flash. Однако я считаю, что её использование здесь не к чему. Поэтому потратив несколько часов я реализовал подобный функционал на javascript в виде плагина к jQuery.
Конечно же нам нужны фотографии предмета, который хотим показать.
Все они помещаются в некоторый div.
Навешиваем плагин.
Всё это можно упаковать в какой-нибудь компонент вашей 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
В комментариях хочу узнать на сколько интересен данный инструмент (особенно как альтернатива флэш версиям), пожелания и критику.
Хочу предоставить вам на суд плагин для 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
В комментариях хочу узнать на сколько интересен данный инструмент (особенно как альтернатива флэш версиям), пожелания и критику.