OVR Viewer

To rotate the object click/touch+hold on the image and drag left/right.

[ Want to see it larger? View Demo Un-embedded ]

Version 1.5 with Drag-to-Rotate


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 the “ovr” folder, which contains all the scripts and the default stylesheet

3. Call scripts into your HTML page in this order:

<script src="ovr/ovr.config.js" type="text/javascript"></script><script src="ovr/ovr.swap.js" type="text/javascript"></script>
<script src="ovr/ovr.js" type="text/javascript"></script>

Note 1: if you also want to support Internet Explorer 8 and earlier include the getElementsByClassName.js script in the “js” folder and link to it before the OVR scripts. You can 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.

Note: If you are using the OVR Add-On for Ryuzine publications you do not need to do this step. Ryuzine handles it internally and automatically.

5. In the content of your page, wherever you would like to include an OVR player add:

<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. 64 frames appears to be optimal, however.

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:

.ovr {} /* Image width + borders x 2 &amp; 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) */


Octocat_smallIf you’ve got the skills and want to help expand, update, or fix stuff in OVR please visit the the repository on GitHub, which is always also the place to get the absolute latest version: https://github.com/kmhcreative/OVR


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.


Quick Start Guide
Creating OVR Images
How OVR works
Known Problems
Revision History

1 Comment

  1. kmhcreative

    NOTE: Comments about ZappBar have been moved to that project’s page:

Leave a Reply








Share this On:

Google+ Reddit Stumble It Digg this! LinkedIn Pinterest RSS Feed E-mail Link!