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"?> 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"?> 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" 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. |
I am Johnson Koh, a graphic and web designer in Singapore. Founded 10Steps.SG in August 2008 with the purpose to share my experiments and interesting design news. Related Posts
5 Awesome Flash WordPress Themes Giveaway
How to Create a Magical Painted Scene
Ways to Handle Design Criticism
Community Works and Experiments 3
40 Sets of Photoshop Custom Shapes
- Buytemplates.net – Buy Web Templates of The Best Quality
One place where you can get everything for setting up your web site is Buytemplates.net. You can select your best template from a collection of pre designed templates and give a professional look t…
- How To Make Cool Icons For Your Social Media Buttons With Adobe Photoshop
Take your time to read on my Adobe Photoshop tutorial on making cool icons for your social media buttons and you can also download the free icon pack at the end.
- Using Vectors for Header Design + 38 Websites with Vectorized or Illustrated Headers
The beauty of using vectors for header design and showcase of 38 websites with awesome vectorized or Illustrated headers.
- Sneaking into Future: 25 Ultra Modern Websites Using HTML5
Take a look and explore the code for an insight into the future of the internet. Be warned, however, few display properly in Internet Explorer. Here comes the 25 websites built using HTML5
15 Comments | Write a Comment
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…
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
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.
ups, i just found out! it was missing in the xml the xmlns:atom=”http://www.w3.org/2005/Atom
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
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!
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…
Hey no problem Ivan! Glad you made it!
Ohhh Thank you so much !
i follow the steps …!
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.
sorry in my english… but i’m from America Central, Costa Rica and i talk and write perfectly in spanish, sure jejeje
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 ?
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!
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
cooliris is awesome man! love the iphone-ish gallery feel, and though there’s some anchor bug, i can’t wait to use this!