How to include the Exhibit API

HowTo Articles Home &raquo;

Exhibit needs the Simile AJAX API, and will include it on its own if it was not already loaded when you load the Exhibit API. If have checked out the code to a local working copy to be able to work with the code offline, you may want to load it yourself first (the script to include is exhibit/src/ajax/api/simile-ajax-api.js), otherwise these two APIs can be included statically as follows:

The HTML version:

Hello World! ...        ...       ...

The XHTML version (note the xmlns:ex namespace declaration):

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  Hello World! ...        ...       ...

Please be warned that XHTML pages embedding Exhibit seem to have layout bugs in Internet Explorer 7.0.

Dynamic Embedding
If you have no control over the  element of your web page, you can still include these APIs by including this Javascript code somewhere in the HTML:

 var SimileAjax_urlPrefix = "http://api.simile-widgets.org/ajax/2.2.1/"; var Exhibit_urlPrefix = "http://api.simile-widgets.org/exhibit/2.2.0/"; var SimileAjax_onLoad = null; /*         *  You can optionally specify parameters: */       var Exhibit_parameters = [ {  name:  "views", value: "timeline" }       ];        window.setTimeout(function {            var head = document.getElementsByTagName("head")[0];            var includeScript = function(url) {                var script = document.createElement("script");                script.type = "text/javascript";                script.language = "JavaScript";                script.src = url;                head.appendChild(script);            }            var includeCSS = function(url) {                var link = document.createElement("link");                link.setAttribute("rel", "stylesheet");                link.setAttribute("type", "text/css");                link.setAttribute("href", url);                head.appendChild(link);            }            Exhibit_onLoad = function {                /*                 *  Include your own styles here.                 */                // includeCSS("my-styles.css"); /*                *  Code that you normally put in the onLoad handler for * instantiating the exhibit and loading data. */           };            SimileAjax_onLoad = function { SimileAjax_onLoad = Exhibit_onLoad; includeScript(Exhibit_urlPrefix + "exhibit-api.js"); }           includeScript(SimileAjax_urlPrefix + "simile-ajax-api.js"); }, 100);

You probably want to include that script at the end of the  element

...           ...             // put that script above here