Hello.
I want to provide you with a jQuery plugin for you, which allows you to implement a three-dimensional display of items (for example, phones or laptops in the online store catalog)
Perhaps everyone met such tools based on flash technology. However, I believe that its use is not what it is. Therefore, having spent several hours, I implemented a similar javascript functionality as a jQuery plugin.
')
Opportunities
- Rotation of an object with a mouse, keyboard buttons, buttons on a website page
- Automatic rotation
- Rotation speed control
- Ability to assign a plugin to multiple objects on the page
- The plugin can return an object with which you can hang additional controls and event handlers.
- Tested under Windows XP in FF 3.5, Opera 10, IE 6+, Google Chrome, Safari 4
How does it work
Of course, we need photos of the item we want to show.
They all fit in some 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 .
We hang the plugin.
$( ".beonoGlobus" ).beonoGlobus();
* This source code was highlighted with Source Code Highlighter .
All this can be packaged in any component of your cms and automatically connected for each product of the catalog.
Where to twist
Official page of the projectGoogle Code ProjectImportant : The current α-version (0.5) is suitable for use, but still “damp” for using the api of plug-in objects. I think by the end of the month I will give the code in order. Also in the plans to implement the rotation vertically.
© as part of the GPLv2
UPDATE startAll similar tools on flash are made on the principle of photo switching.
I didn’t have a task to do some other 3D representation through canvas and the like.
You need to show the user the subject from all sides? You are welcome!
Honestly, I do not know how to do this in another way.
Build image via canvas? - Hang the user's browser.
Flash examples:
pleer.ru/3dfoto/indexf.php?p=177303df.ru/3d/canon-eos-350-d-kitwww.3dbin.comThis is a flash and it just switches the pictures.
My task was to implement the same thing without a flash!
Thanks to all! :)
UPDATE endIn the comments I want to know how interesting this tool is (especially as an alternative to flash versions), suggestions and criticism.