Javascript

How to embed the wall using JavaScript

There are two ways to embed the Cooliris Wall on your webpage. One method uses a standard Flash object embed, as discussed in the Embedding the Wall section. The second method relies on JavaScript and the industry standard SWFObject library.

If you are comfortable with JavaScript, we recommend using this approach as it much more flexible. Once the wall is embedded with JavaScript, our JavaScript APIs allow you, for example, to manipulate the DOM so that user events on your website (such as clicking a button) can influence events on the Cooliris Wall (like changing the feed).

There are three steps needed to embed the Cooliris Wall using JavaScript.

1. Add the SWFObject JavaScript file in your webpage:

    <script type="text/javascript"
         src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js">
    </script>
    

2. Create a place on your webpage where the embeddable wall will appear:

    <div id="wall"><!-- 3D Wall Goes Here --></div>
    

3. Add the JavaScript to embed the wall.

    <script>
        var flashvars = {
            feed: "api://www.flickr.com/"
        };
        var params = {
             allowFullScreen: "true",
             allowscriptaccess: "always"
        };
        swfobject.embedSWF("http://apps.cooliris.com/embed/cooliris.swf?t=1307582197",
            "wall", "600", "450", "9.0.0", "",
            flashvars, params);
    </script>
    

Note that the id of the div that contains the wall must be the same as the identifier in the JavaScript snippet. The Google Code website provides additional information on how to embed Flash content with SWFObject.

Next > JavaScript APIs