3D Product Photography
3d Object Photography     360 Product Rotate
Account Legal  |  Privacy Contact Us

          
360 Object Rotate
360 degree, Product Rotation    Company       Products       Showcase       Industry       Support       Store  3d Object Rotate, Product Zoom Tool
   Home > Support > Installation login  
    Company
    Products
    Showcase
    Industry
    Support
rotate 3d in websiteQuestion & Answers
flash fast spin object    Installation
How to prograph products rotateHelp
flash vr object tutorial spinFeatures
3D jewelry viewer ringsTrouble Shooting
    Store
 
 
Installation
Looking for more answers?

There are three simple steps to implement the 3DRotator Viewer

      1) copy Viewer Program files to a new folder
      2) copy Object Data files to a new folder
      3) copy an 'HTML snippet' into a webpage

Need More Help?

Please email us if you can't find your question listed here.

Copy the 3DRotator Viewer Program Files

Copy the Object's Data Files

Copy the HTML snippet

Simply Copy and Paste a small block of code to the desired location in your webpage (such as: .htm .asp .php etc...)

  • On the accounts page, click on the words 'HTML snippet' Next to the existing object purchased. Copy and paste the block of code to the location in your webpage where you would like the 3DRotator Viewer displayed.

    The 'HTML snippet' should look like the following


    <noscript> <img src='/rotatordata/r00001/spin2-medium.gif'> <br> </noscript>
    <script src='/rotatordata/rotatorscript.js' > </script>
    <script language='JavaScript' type='text/javascript' >
        TypicalRotator('r00001', 'abc123DEF456', 'medium', '200', '220' );
    </script>


    The size of the viewer is specified by the last two numbers. In this example width=200 and height=220


If you have symptoms such as seeing a grey square or error messages then visit our trouble shooting section.

You are Done...

The technical person wanting more control should read on.


There are 6 functions that each provide you with increasing amount of control over
  • File locations
  • Initial Static Image loaded
  • Initial Demonstration of the viewer tools
  • Start up viewing angle, zoom, and pan
  • Substitute animation for the unlikely chance Java is disabled
  • Graphical style of the viewer to match your website
  • Webpage/viewer load timing
  • Changing the Object in the Viewer from a link on the page
  • Inserting the viewer in an Email or PDF (acrobat reader)



The most basic 'HTML snippet' has the following format:

<noscript> <img src='/rotatordata/dataName/spin2-medium.gif'> <br> </noscript>
<script src='/rotatordata/rotatorscript.js' > </script>
<script language='JavaScript' type='text/javascript' >
   TypicalRotator(dataName, key, quality, viewerWidth, viewerHeight );
</script>

The image between the NOSCRIPT tags displays an animation of the object if JavaScript is disabled. For every Object we supply you with 3 different files for this use: spin2 rotates the object around twice, spinforever continuously rotates the object, stillimage is a static picture of the object.
We recommend that you add additional html to provide a link to instructions on how to turn on JavaScript such as:

<noscript> <img src='/rotatordata/dataName/spin2-medium.gif'> <br> <a href='http://www.3drotator.com?j=enablejava' style='font-size:10px;'>Enable JavaScript to Rotate, Zoom,<br>and Measure this Product</a> <br> </noscript>


TypicalRotator()

The TypicalRotator() function is defined in the rotatorscript.js file, and the color coded key-words shown above represent the following:

  • The dataName is the object data file name that you downloaded (example: 'r00001' )

  • The key is the password given to you at the time of purchase or see the account page for your list. The password is case sensitive, therefore, we recommend that you Copy and Paste it. (example: 'abc123DEF456')

  • The quality determines the resolution to display: 'low', 'medium', or 'high' - Note: this setting must match your password or be of a lower quality.

  • The viewerWidth and viewerHeight change the size of the viewer to be displayed. - Note: The height should typically be 20 pixels greater than the width to account for the size of the viewer tool buttons. To optimize webpage real-estate, a Tall and Narrow viewer is also possible for a similarly shaped object.



CustomRotator()

For more control, use the CustomRotator() function instead of TypicalRotator()

   CustomRotator( dataName, key, quality, viewerWidth, viewerHeight, dataPath, additionalParameters, loadingImage, noJavaHTML, onRotatorStart, rotatorVersion, rotatorId, loadDelay );


The CustomRotator() function is defined in the rotatorscript.js file, and the color coded key-words represent the following:

  • The dataName is the object data file name that you downloaded (example: 'r00001' )

  • The key is the password given to you at the time of purchase or see the account page for your list. The password is case sensitive, therefore, we recommend that you Copy and Paste it. (example: 'abc123DEF456')

  • The quality determines the resolution to display: 'low', 'medium', or 'high' - Note: this setting must match your password or be of a lower quality.

  • The viewerWidth and viewerHeight change the size of the viewer to be displayed. - Note: The height should typically be 20 pixels greater than the width to account for the size of the viewer tool buttons. To optimize webpage real-estate, a Tall and Narrow viewer is also possible for a similarly shaped object.

  • The dataPath is the path or folder where you saved the object's data files. If left "" (blank) then assumes a default value of 'dataName/' . Do not include 'http://www.yourwebsite' and it MUST end with a forward slash '/' (example: '/rotatordata/r00001/') If this path does not start with a '/' then it is relative to the codebase 'rotatordata'. If it does start with a '/' then is relative to the root folder of your website. If you choose not to have the object data folders within the codebase folder then the viewer will not function when the webpage is browsed as a 'file' on a local hard drive or CD/DVD.

  • The additionalParameters is where you specify any optional parameters such as starting demo, zoom, pan, and angle. As well as custom graphics for the tool bar buttons and message bubbles so the viewer integrates perfectly with your website's look and feel. Example:

    "<PARAM NAME ='Demo_At_Start_Up' VALUE='disable'><PARAM NAME ='Zoom_Start' VALUE='1'>"

    Pay particular attention to where to use a single quote ' and a double quote ". (note: a double quote is not equivalent to two single quotes.)

  • The loadingImage specifies the image that is displayed for the very short programmable delay before the viewer loads. If left '' (blank) the default value is 'dataPath/stillimage-quality.gif'

  • The noJavaHTML is where you specify standard HTML that will only be shown if java has been disabled, such as an <img> tag with a filename of an animation or standard photograph of your object. Similar to the <noscript> tags, the text following the <img> tag should link to a page that describes how to turn java back on. Alternatively, these 'no-java' lines can be any amount of standard HTML including images, text, and tables, that are ignored if Java is enabled. If left '' (blank) then defaults to the following Example:

    "<img src='dataPath/spin2-medium.gif'> <br> <a href='http://www.3drotator.com?j=enablejava' style='font-size:10px;'>Enable Java to Rotate, Zoom,<br>and Measure this Product</a> <br>"

    Again pay particular attention to where to use a single quote ' and a double quote ". (note: a double quote is not equivalent to two single quotes.)

  • The onRotatorStart defines a JavaScript function to call after the viewer has loaded and is ready. Often this function will set a variable to indicate to the rest of your webpage that the viewer has loaded. If you leave this '' (blank) then the default function 'RotatorOnStart' in the rotatorscript.js file is called. See the rotatorscript.js file for common examples of use.

  • The rotatorVersion is where you may specify an earlier version of the 3DRotator Product Viewer (example: 'rotator11'), We strongly recommend you leave this '' (blank) so that the latest version of the Viewer is always used.

  • The rotatorId specifies the ID name of the viewer and is also passed on to the onRotatorStart function. If left '' (blank) the default value of 'RotatorViewer' is used. If more than one viewer is on a page then defaults to 'RotatorViewer2', 'RotatorViewer3'...

  • The loadDelay defines the amount of time (milliseconds) to allow your webpage to load before the java language files are loaded for the first time. This is required to ensure smooth building and display of the rest of your page before moderate processor use. If left '' (blank) it defaults to value of '500' milliseconds (half a second). (example: '500')

The following is an example of the function in use:

<noscript> <img src='/rotatordata/r00001/spin2-medium.gif'> <br> <a href='http://www.3drotator.com?j=enablejava' style='font-size:10px;'>Enable JavaScript to Rotate, Zoom,<br>and Measure this Product</a> <br> </noscript>
<script src='/rotatordata/rotatorscript.js' > </script>
<script language='JavaScript' type='text/javascript' >
   CustomRotator('r00001', 'abc123DEF456', 'medium', '200', '220', 'r00001/', "<PARAM NAME ='Demo_At_Start_Up' VALUE='disable'><PARAM NAME ='Zoom_Start' VALUE='1'>", '/rotatordata/r00001/stillimage-medium.gif', "<img src='/rotatordata/r00001/spin2-medium.gif'> <br> <a href='http://www.3drotator.com?j=enablejava' style='font-size:10px;'>Enable Java to Rotate, Zoom,<br>and Measure this Object</a> <br>", 'RotatorOnStart', '', 'RotatorViewer', '500' );
</script>



If all of the viewers on your website are to use the same custom settings, you may be better off modifying the defaultRotatorParameters variable, and/or the TypicalRotator() function, both defined in the rotatorscript.js file. The TypicalRotator() function simply calls the CustomRotator() function with default values. You might also consider creating copies of the TypicalRotator() function with new names for different 'styles' of viewers on your site. Like HTML, the rotatorscript.js file can be opened with any simple text editor like Notepad or Wordpad.




ReplaceCustomRotator()

To change the current object displayed in an already existing viewer use the ReplaceCustomRotator() function

   ReplaceCustomRotator( dataName, key, quality, viewerWidth, viewerHeight, dataPath, additionalParameters, loadingImage, noJavaHTML, onRotatorStart, rotatorVersion, rotatorId );


The ReplaceCustomRotator() function is defined in the rotatorscript.js file, and the color coded key-words are the same as defined for the CustomRotator() function above.

A viewer must have already been loaded on the webpage with either the TypicalRotator() or CustomRotator() functions. Be Sure to update the rotatorId to the correct name if there is more than one viewer on the page.

Typical use of this function allows a link on the webpage to tell a viewer to load in a new object without loading in a whole new webpage. Use the following snippet as a starting point:

<a href="javascript:void(0);" onclick="ReplaceCustomRotator('r00001', 'abc123DEF456', 'medium', '200', '220', '', &quot;<PARAM NAME ='Demo_At_Start_Up' VALUE='disable'><PARAM NAME ='Zoom_Start' VALUE='1'>&quot;, '', '', '', '', 'RotatorViewer');">View Other Object</a>

THIS NOTE IS REALLY IMPORTANT: pay particular attention to where to use a single quote ' and a double quote " and the word &quot; that represents a " . The &quot; is required if the string contains quotes within it like for additionalParameters and noJavaHTML. This funny quirk is caused by the fact that the function itself is surrounded by double quotes in the onClick="..." event statement. (note: a double quote is not equivalent to two single quotes and in this case two single quotes '' looks almost identical to a double quote " . It is best to copy and paste this snippet then use the arrow key to step the cursor over each quote to see if it is two singles or one double)



ReplaceTypicalRotator()

The ReplaceTypicalRotator() function is a simplified version of ReplaceCustomRotator()

   ReplaceRotator( dataName, key, quality, viewerWidth, viewerHeight );


The ReplaceTypicalRotator() function is defined in the rotatorscript.js file, and the color coded key-words are the same as defined for the TypicalRotator() function above.

The limitation of this function is that it will only reload an object in the first viewer on the webpage. If you have more than one viewer, and you want the second viewer to load in a new object then you must use ReplaceCustomRotator() so that you can specify the other viewer's rotatorId name that you want to affect.

Typical use of this function allows a link on the webpage to tell a viewer to load in a new object without loading in a whole new webpage. Use the following snippet as a starting point:

<a href="javascript:void(0);" onclick="ReplaceTypicalRotator('r00001', 'abc123DEF456', 'medium', '200', '220' );">View Other Object</a>

Again pay particular attention to where to use a single quote ' and a double quote ". (note: a double quote is not equivalent to two single quotes.)



AdvancedRotator()

For direct control and loading of the viewer, use the AdvancedRotator() function instead of CustomRotator()

   AdvancedRotator( dataName, key, quality, viewerWidth, viewerHeight, dataPath, additionalParameters, loadingImage, noJavaHTML, onRotatorStart, rotatorVersion, rotatorId );


The AdvancedRotator() function is defined in the rotatorscript.js file, and the color coded key-words are the same as defined for CustomRotator() above.

Advanced programmers may want to use this function if they have specific reasons that require them to gain more control over where and how and when the viewer is loaded. It writes the basic APPLET tags to the webpage document.

You can not use the ReplaceTypicalRotator() or ReplaceCustomRotator() functions on a viewer that has been started with AdvancedRotator()

Note: there are no default values inserted for you if you leave any variables '' (blank)



MakeRotatorCode()

To get the string equivalent of the APPLET/OBJECT tags, use the MakeRotatorCode() function instead of AdvancedRotator()

   string = MakeRotatorCode( dataName, key, quality, viewerWidth, viewerHeight, dataPath, additionalParameters, loadingImage, noJavaHTML, onRotatorStart, rotatorVersion, rotatorId );


The MakeRotatorCode() function is defined in the rotatorscript.js file, and the color coded key-words are the same as defined for CustomRotator() above.

This function returns a string that contains all of the APPLET/OBJECT tags. You can use this to write to the webpage document yourself or to include in an email or pdf.

Note: there are no default values inserted for you if you leave any variables '' (blank)

 
Home | Products | Showcase | Support | Orders | Contact Us
Privacy | Terms of Use | Conditions of Sale

Copyright © 2001-2020 3DRotator Communications Incorporated.
3DRotator, (3D), Teleport, and 2DImager are either registered trademarks
or trademarks of 3DRotator Communications Incorporated
in the United States and/or other countries.