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 with the purpose to share my experiments and interesting design news. Follow me on Twitter here. Other Design Articles You May Find Interesting
- 30 Nice Email Newsletter Designs for your Inspiration
Email newsletters are becoming more and more popular on the internet as businesses begin to use them as a viral way of communicating with their audiences/customers. They are, without doubt, great m...
- Who Is Lady Umbrella? Rob Ryan Interview & Exclusive September Discount Code
We are introducing you all to a great t-shirt company and also offering all our readers an exclusive 15% discount on all Lady Umbrella T-shirts.
- 80+ Breathtaking Nature Inspired Photos
If you are feeling bad or just tired by the hard work so you have no need to be feel like that anymore because the photos we are going to share with you will must change your frame of mind and you ...
- UBD Network-Urszula Wiznerowicz, Featured Designer
Urszula Wiznrowicz won the Main prize at this years D&AD New Blood Exhibition and has been chosen as one of the 4 finalists for the Channel 4 and Saatchi Gallery: New Sensations 2010 Prize.
- How to create a great wordpress layout in Photoshop
How to create a sleek wordpress layout. PSD available for download FREE
16 Comments | Write a Comment
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â€.
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!