New Browsing Experience with Cooliris

I think it has been noticed that there is a Cooliris screen added at the bottom of the page recently. You can find all the 10Steps.SG tutorials laid out neatly in one glance. Here I will introduce this amazing program to everyone and also the simple steps to achieve what you had just saw. Before I proceed further, view the video below for a quick demonstration.
 
 
What is Cooliris?
Cooliris provides a lightning fast, cinematic way to discover the Web. The plug-in takes you to an expansive "3D Wall" that lets you browse thousands of images, videos, and more with ease and speed. Download now!

For more information, visit the official site at www.cooliris.com

 
 
Basically there are 3 different ways to work with Cooliris, enabling your site, embedding a flash wall or to use its WordPress plugin into your blog. I shall explain briefly on each on them.

Enabling Your Site

This is to perform slight modifications to your website’s header so it can be viewed using Cooliris. Also, you will need to download Cooliris in order to experience the effects. After you have installed Cooliris to your favorite browser ( applicable only for Internet Explorer, Firefox and Safari ), you can see my example at http://10steps.sg/cooliris/. For a quick configuration, follow through the few steps here and you are done!

Embed Wall ( with Media RSS )

I shall explain a bit more detailed for this part as I had been through several trials and errors before getting things correct like the one displayed at the bottom of this page.

First of all we will need to create two files, a Media RSS ( .rss ) and a XML (. xml ). Open up notepad, and key in the following.

<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM
"http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
<allow-access-from domain="*.cooliris.com" secure="false" />
</cross-domain-policy>

Save this file as crossdomain.xml. Upload the file to the root of your website ( the file location will be something like http://www.yourdomain.com/crossdomain.xml ).

Open up notepad again, and key in the following ( amend those lines in italic ). Duplicate the item tags and their in betweens if you have more than one thumbnail to display.

<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0" xmlns:media="http://search.yahoo.com/mrss/"
xmlns:av="http://www.searchvideo.com/schemas/av/1.0">
<channel>
<title>Your Own Title</title>
<description>Your Own Description</description>
<item>
<author>Your Name</author>
<title>Title of Current Item</title>
<link>http://yourdomain.com/yourpage.html</link>
<media:content url="http://yourdomain.com/yourpage.html" />
<media:thumbnail url="http://yourdomain.com/images/yourthumbnail.jpg" width="600" height="400" />
</item>
</rss>

Save this file as photos.rss. Upload the file to the root of your website ( the file location will be something like http://www.yourdomain.com/photos.rss ). Now comes to the last step. Insert the following codes ( amend those lines in italic ) at the location where you wish the flash wall to appear.

<object id="o" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
width="760" height="450">
<param name="movie"
value="http://apps.cooliris.com/embed/cooliris.swf" />
<param name="flashvars"
value="feed=http://www.yourdomain.com/photos.rss" />
<param name="allowFullScreen" value="true" />
<param name="allowScriptAccess" value="always" />
<embed type="application/x-shockwave-flash"
src="http://apps.cooliris.com/embed/cooliris.swf"
width="760" height="450"
flashvars="feed=http://www.yourdomain.com/photos.rss"
allowFullScreen="true" allowScriptAccess="always"></embed>
</object>

WordPress Plugin

You can download the wordpress plugin here. Ok. I have not gone far in experimenting with the plugin because it requires PHP5. Otherwise you will get the error message like mine below.

Will be upgrading my PHP version and share more information with everyone here at a later date.

Meantime if anyone is also facing some bugs, can post your problems to the Developer Forum. I am also experimenting over here so may not be able to answer well. Cheers.

Other Design Articles You May Find Interesting

16 Comments | Write a Comment

  1. Solid post full of useful tips! My site is fairly new and I am having a baffling time getting my subscribers to leave comments. They are coming to the website but I have the feeling that “nobody wants to be first”.

  2. Johannes says:

    This is great! You are the first one really connecting pictures and posts making it useful for navigation in wordpress!

    Do you know if it is possible to create a link button in the picture or text description? For someone not so into cooliris it might be difficult to find the “open this items page” Button.

    Do you know a way to set a link more visible like amazon does it in their ecommerce version of cooliris?

    Your help would be highly appreciated…

  3. usman says:

    hay every one.
    I have done all the steps but it is not working. neither in firefox nor in IE.
    i have checked ever thing again and again. i am testing on a single image and path is correct also all the files are placed on proper location.

    can any body help?

    Thanks in advance..
    Regards
    Usman

  4. Adrian says:

    Hiya!. Thanks for the blog. I’ve been digging around looking some info up for shool, but there is so much out there. Yahoo lead me here – good for you i suppose! Keep up the great information. I will be coming back in a couple of days to see if there is updated posts.

  5. carlarrj says:

    ups, i just found out! it was missing in the xml the xmlns:atom=”http://www.w3.org/2005/Atom 🙂

  6. carlarrj says:

    hello
    I’m using cooliris with embed and my xml file. Iin firefox it’s working but in ie the images don’t appear, stays loadin all the time. I have the crossdomain.xml in root and all the others files under a folder. The only way that the cooliris works in ie it’s with the normal images/configuration.

    What can i do to make this work?
    Thanks in advance, great tutorial 🙂

  7. Johnson Koh says:

    Hey Ivan, thanks for pointing out my text errors. I have amended it already!

    I think you have pointed out another important point that both Cooliris and myself have missed out 😀 At the header you will need to do slight adjustment in order to embed a flash object manually.

    Download AC_RunActiveContent.js here
    – Upload it to your directory
    – Just before with your head tags, add the line

    That should be it!

  8. hi, koh you need to correct the steps because in some words has “photo.rss” in others “photos.rss”, the ” S ” maybe can confused, in my case i don’t haven’t problems… xD but i can’t see the images… look http://www.thecanyonlodge.com/Galeria/tabid/472/language/en-US/Default.aspx and thanks…

  9. Johnson Koh says:

    Hey no problem Ivan! Glad you made it!

  10. Ohhh Thank you so much ! 🙂 i follow the steps …!

  11. Johnson Koh says:

    Hi Ivan, no worries about the english. Mine is so-so as well.

    For the Cooliris, if you wish to embed the flash wall like mine below, you do not have to download the software. Just follow the steps I mentioned above under the title of “Embed Wall ( with Media RSS )”

    Basically what you need will be to create
    – crossdomain.xml (codes as above)
    – photo.rss (codes as above)

    Once you have the 2 files, upload to your server and embed the flash into your desired location within your HTML page. Everything has to be done manually in this case.

  12. sorry in my english… but i’m from America Central, Costa Rica and i talk and write perfectly in spanish, sure jejeje

  13. i can’t put the flash of cooliris in my website… why ? i download the software, put the images… and the software no create the xml ? or html ?…. mmm can you help me people ?

  14. Johnson Koh says:

    Hi Ron, It’s nice to hear from you!

    And yes, your update did solve the anchor bug mentioned. Also, I have edited this article so it will not confuse your new users on it. Thanks and looking forward to the good future of this software.

    Cheers!

  15. Ron Yeh says:

    We just pushed an update (if you right click the wall, it should say version 24200). Can you please verify that this anchor bug no longer exists?

    Thanks for your interest in our software!

    Best,
    Ron & the Cooliris Team

  16. Elaine says:

    cooliris is awesome man! love the iphone-ish gallery feel, and though there’s some anchor bug, i can’t wait to use this!

17-09-2014 | Comments Off on Top 50 sport wordPress themes
18-06-2013 | Comments Off on 20 sets of free grunge photoshop brushes
21-01-2013 | Comments Off on Free futuristic fonts from urbanfonts.com
06-01-2013 | (2) Comments
24-11-2012 | Comments Off on Make your own business card for free
08-02-2012 | (1) Comment
  • Free Brushes
  • FudgeGraphics
  • CrazyLeaf Design Blog
  • Fuel Your Creativity
  • Photoshop Tutorials and Design Resources
  • touch up photo retouching services
  • Small House Design
  • http://www.webbuildersguide.com/
Follow My Twitter Subcribe Full RSS