---

jQuery API

You can configure interactive Clara.io embeds using jQuery.

If jQuery has been added to the page, a jQuery plugin will be added, allowing you to attach a player to the element through javascript.

$('#my-clara-scene').clara({id: 'uuid'});

Options

Some options control the setup of the player.

• header (Boolean), default: true
  Shows the header inside the player

• loadingImg (String), default: null
  An href to an image to display while the player is loading. By default (if the value is not defined or null), we should the scene thumbnail. If you set loadingImage to be false, no loadingImg will be displayed.

• loadingProgress (Function)
  This function will be called with the progress of the scene (a floating point/fractional number from 0 to 1) as it loads.

• timeline (Boolean), default: true
  Shows the timeline (will not display if there is no animation)

• tools (Boolean), default: true
  Display the navigation tools

• hideLogo (Boolean), default: false
  Display the Clara.io logo in the bottom right corner (requires a Professional membership to disable)

• streamChanges (Boolean), default: false

Any changes made to the scene during viewing will be saved in the original scene. Thus the scene is writable. This requires an authenticated Clara.io account that has write access to the scene in question. It is necessary to list the domains you are embedding Clara.io into to be listed in the scene’s priviledged domains, which is available on the Publishing tab of the Share dialog.

• loadPlugins (Boolean), default: false

By default, we do not load custom plugins in embedded scenes. If you set this option to true we will load any custom plugins specified by the user owning the scene.

Here is an example of how to load a Clara.io interactive embed:

$('#my-clara-scene').clara({
  id: 'uuid',
  timeline: false,
  loadingImg: '/img/splash.jpg',
  loadingProgress: function(progress) { console.log('Scene is '+progress*100+'% loaded'); }
});

Once initialized on the page, you can send commands to the embedded scenes through the javascript api.

The jQuery plugin returns a Javascript promise that allows you to execute further javascript after the scene is loaded.

$('#my-clara-scene').clara({id: 'uuid'}).then(function() {
    alert('player started');
});

Note that this means that the clara function does not return an object suitable for standard jQuery chaining. This behaviour is similar to he jQuery ajax function.

Scene Prefetching

NOTE: For advanced users only.

You can speed up display of the player by loading the scene in parallel with the clara.io Javascript.

Using HTML5 Fetch API:

$('#my-clara-scene').clara({id: uuid, sceneJSON: fetch('https://clara.io/api/scenes/' + uuid)});

Using jQuery:

$('#my-clara-scene').clara({id: uuid, sceneJSON: $.get('https://clara.io/api/scenes/' + uuid)});

You can also pass the scene in as a JSON String or as a plain old Javascript object.

---