Cooliris: Using MediaRSS to display your own custom 3D Photo wall

Cooliris is a plugin available for Firefox that allows you to view photos from the web on an interactive 3D wall. The application also has a web-based flash application that allows you to display a 3D wall to your website visitors – even if they don’t have Cooliris installed.

I was recently introduced to Cooliris by my friend Gary, who was very impressed with the features of the Firefox Plugin. After finding out there’s an API for the app, we began investigating ways to use it on the web.

The API is pretty easy to use. Cooliris have an awesome set of documentation articles over on their website, and you can choose whether to use JavaScript or a flash object to embed the 3D wall on your site.

Because of Adobe’s tight security when it comes to cross domain scripting, you have to place a file called crossdomain.xml in your domains root directory. For example. http://philhawthorne.com/crossdomain.xml would be my domains root directory. You’ll also need to make sure that your MediaRSS validates as XML correctly. I suggest you check your MediaRSS is valid by using the tool at www.feedvalidator.org.

I setup the Cooliris wall on the website, and it loaded fine, three boxes appeared for the three test images, and hovering over the images showed me the image title. That was all good. But for some reason, the images wouldn’t load. Looking in the status bar of the browser, I can see the images being loaded, but they just wouldn’t appear. A lot of support posts on the Cooliris website about this issue all pointed to the crossdomain.xml file being the issue. But I had already checked that.

What’s strange about the Cooliris plugin is that when you press the slideshow button, the images would actually display. This made me think that the issue was something to do with Cooliris, and I had done everything correctly. I re-checked my MediaRSS to make sure it was valid XML. I changed the <media:thumbnail> tags from self closing (XHTML style) tags to <media:thumbnail> </media:thumbnail> tags. Still nothing.

Eventually I discovered the issue. It was actually a crossdomain.xml issue. The images I was serving to the Cooliris were stored on a subdomain. After copying the crossdomain.xml file to the subdomains root directory, the images appeared in the 3D wall.

Hopefully this can save someone hours of headaches.

Recommended Posts

Start typing and press Enter to search