To rotate the object click/touch+hold on the image and drag left/right.
[ Doesn't fit? View Demo Un-embedded ]
Version 1.3 with Experimental Touch Support
>>DOWNLOAD OVR<<
What is it?
You’ve no doubt seen ObjectVR images before, as they are often used for 360 degree views of a product. Typically this requires some kind of third party plugin like Quicktime, Flash, or Java. This is changing, however, with the advent of new coding techniques as evidenced by a 360 degree viewer on the Apple HTML5 Gallery. That example, though, only works in modern “WebKit” based browsers. It won’t work in Firefox, Internet Explorer, or Opera.
OVR accomplishes the same thing without a plugin, without requiring a WebKit browser, and gracefully degrades for older browsers. This viewer can only handle a single plane of view, it cannot handle CubicVR views (those that also allow you to rotate to the top an bottom of the object). OVR can turn any image sequence into an ObjectVR, all you need to do is drop it into the page, tag it with the class “ovr” and optionally a frame count, and the script builds a viewer for each “ovr” tagged image. OVR also includes experimental built-in support (requires no external frameworks) for touch interface devices like the iPhone, iPad, and Android phones and tablets.
Quick Start Instructions
1. Download the free OVR package and unzip it.
2. Upload all scripts to your site (for example “js”)
3. Call scripts into your HTML page in this order:
1 2 3 | <script src="js/getElementsByClassName-1.0.1.js" type="text/javascript"></script> <script src="js/ovr.config.js" type="text/javascript"></script> <script src="js/ovr.js" type="text/javascript"></script> |
Note: first script is optional for IE support and is not included. Get the latest version from Robert Nyman’s free getElementsByClassName. The “ovr.config.js” file is also optional, you could set the same variables in the “ovr.js” script instead if you wanted to.
In the optional configuration file you can conveniently set variables to either show or hide the user instruction message and/or change the message (for example if you need it in another language). Styling of the message is handled in the “vr.css” stylesheet or through an in-page style. Configuration file settings apply to ALL of the OVR players in a page.
4. Include the following attributes in your <BODY> tag:
onload event runs the OVR script
onresize event reloads page so new variables are used
onorientationchange event may or may not be read as a resize depending on device. If not then the slider coordinates need to be adjusted for the new orientation.
5. In the content of your page, wherever you would like to include an OVR player add:
1 | <div class="ovr f-16"><img src="mypic-vr_00.jpg" alt="" /></div> |
The “ovr” class helps the OVR script find each image that should be turned into a OVR player.
The “f-16″ part is optional. The number indicates the number of frames in the animation sequence. If you omit the f-xx style the script will assume your animation has 8 frames.
You do not need to give the image a width and a height. OVR will use either the size as set in the stylesheet or, if no CSS is applied to the image, the actual size of the image.
6. You will most likely want to set at least some styles in your CSS:
1 2 3 4 | .ovr {} /* Image width + borders x 2 & image height + borders x 2 + 50 pixels */ .ovr img, .ovr .vr img {} /* Set image size in this one */ .vr {} .ovrmsg {} /* How-to-use message (if enabled in config file) */ |
The OVR Viewer script code is being released under the MIT License (c) Copyright 2011 Kristiana M.Hansen. Please read the license file bundled with the download.
In case anyone is wondering what brand that Android 3.x “Honeycomb” tablet is in my sample product shot, it’s a completely fictional tablet of my own design. I built the model in Google SketchUp and rendered it in Kerkythea.
Sections:
Quick Start Guide
Compatibility
Creating OVR Images
How OVR works
Known Problems
Pure CSS Method
Revision History
Customized for Mobile Devices | Powered by