How to include the Exhibit API

From SIMILE Widgets
Jump to: navigation, search

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:

   <html>
   <head>
       <title>Hello World!</title>
       ...
       <script src="http://api.simile-widgets.org/exhibit/2.2.0/exhibit-api.js" 
           type="text/javascript"></script>
       ...
   </head>
   <body>
       ...
   </body>
   </html>

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

   <?xml version="1.0" encoding="UTF-8"?>
   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   
   <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"
       xmlns:ex="http://simile.mit.edu/2006/11/exhibit#">
   <head>
       <title>Hello World!</title>
       ...
       <script src="http://api.simile-widgets.org/exhibit/2.2.0/exhibit-api.js" 
           type="text/javascript"></script>
       ...
   </head>
   <body>
       ...
   </body>
   </html>


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 head element of your web page, you can still include these APIs by including this Javascript code somewhere in the HTML:

   <script type="text/javascript">
       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);
   </script>

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

   <html>
       <head>
           ...
       </head>
       <body>
           ...
           <script type="text/javascript">
           
               // put that script above here
           
           </script>
       </body>
   </html>
Personal tools
Namespaces
Variants
Actions
Navigation
Toolbox