twitter linkedin

What you need

You need images of your product. More images result in as smoother presentation but a longer loading time. Find the balance for your audience, we normally use 16 to 72 images. Put them in the same directory and call them image_01, image_02 and so on.

Free version

You can use the viewer for free but you will see our logo everytime you turn.
There is no restriction in functionality. Please use the code below for the free version or download just the viewer file. Of course you can download the

Basic example /Free version


<!--You need JQuery and our script-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script src="http://360-javascriptviewer.com/js/jquery.mobile.vmouse.js" type="text/javascript"></script>
<script src="http://www.360-javascriptviewer.com/js/javascriptviewer_jso.js" type="text/javascript"></script>

<!--Specify an image holder and the main image-->
<div id="image_holder_x" style="height:300px;">
  <img id="product_image_x" src="http://360-javascriptviewer.appspot.com/images/ipod/ipod.jpg"  >
</div>
  
<script>
$( document ).ready(function() {
//Lets create an instance of the viewer
 var presentation = new javascriptViewer($('#product_image_x'),{
        total_frames:72,
        target_id:'image_holder_x'
        });
                     
//Lets start the presentation
 presentation.start(); 
 });

</script>                     

Events

loadImageStart
.loadImageStart( [eventData ], handler(eventObject) )

This event is triggered when the viewer is ready to load all the images. That doesn't mean that he can find the images

loadImageProgress
.loadImageProgress( [eventData ], handler(eventObject, currentPerc, currentNumber ) )

This event is triggered everytime an image is start to load. You get the current image number and the percentage (rounded)

loadImageEnd
.loadImageProgress( [eventData ], handler(eventObject, currentPerc, currentNumber ) )

This event is triggered when all the images are loaded and before the mousecontrols are attached

move
.move( [eventData ], handler(eventObject, currentNumber ) )

This event is triggered when the presentation is rotating

startDragging
.startDragging( [eventData ], handler(eventObject, currentNumber ) )

This event is triggered when the user starts rotating

stopDragging
.stopDragging( [eventData ], handler(eventObject, currentNumber ) )

This event is triggered when the user stops rotating

Methods

start()

If you don't want something special this is the method to start your presentation.
If you give the parameter 'just_load: true' it will only load the images. If the user wants to see your product in 360 degrees he won't have to wait when he presses a button.

startPresentation()

Use this one if you choose just_load: true in setup

getCurrentNumber()

Gets the current number

rotateToNumber(int Number)

Rotate to an image number

Properties

total_frames:
Give the amount of images
target_id:
Where to render the presentation
ease:
Slowing down after stop rotating (default 8)
inertia:
Speed of presentation (default 1.5)
reverse:
Turn left or right on drag (default false)
just_load:
Use this for background loading (default false)