iCarousel, AJAX and iFrames….

If you’re hear looking for the iCarousel files, just skip to the bottom

Today I had the day off work. So I went to implementing some things to my site that needed to be done. A new (for that matter, the first) Current Works and projects section. I thought of the idea of doing it as browsing an iPhone in multiple pages. This came to me after I visited Uniqueblogdesigns.com when they were featured in a Smashing Mag article on communicating design. I saw the carousel they used and thought it was nifty. So I wanted one. The iPhone was my spin on it. I figured out they were using jCarousel (i think).
So I went about downloading and installing it on my page to find that the jQuery, Prototype and Mootools libraries DO NOT play nicely together. Either mootools effects work or the carousel did or nothing at all… After tons of fiddling, even with an launching the jCarousel in an iFrame so the libraries were not on the same page, I had no luck. I then discovered iCarousel- the Mootools built carousel. Necessary for AJAX library harmony… shortly after, however, I discovered it a) iCarousel was no longer supported anymore. b) the source files were no longer on the web, or so it seemed as the developers legacy page no longer existed.

So I got at some digging…

I found that Ajaxdaddy.com had a working demo of the module (really interested because EVERY OTHER Ajax tutorial SITE only had images that linked back to the now dead developers site). So props to Ajaxdaddy for actually having a workin demo of their own. However, it wasn’t that easy. The site linked to the dev site for download. So instead, I used DeepVacuum to grab all the files and libraries from that demo. The second hurdle was the that this particular demo only showed you how to make vertical carousels… with no documentation on the script itself, I was stuck momentarily.

Back to Google.

I went back to Google and search iCarousel then viewed the cached pages of the once was iCarousel website. From there I copied the link location to the horizontal demo page, plugged that into Google, went to the cached page and ripped source code. After about 30 more minutes of fiddling with libraries, includes and various versions of Mootools I had a working horizontal carousel, that did not conflict with script.aculo.us or prototype!

So check it out- my iPhone carousel

I modeled it after the real interface, even including a realtime javascript clock at the top of the phone so it displays the real time just like an iPhone in the top center. The background I made in photoshop and the thumbs I manually added a drop shadow too. I think it came out pretty well. One thing I had to abandon for now though, was opening the pages inside the iFrame (aka inside the phone). For some reason when I did that, once you open the page, you cannot get back to the main interface, refreshing the page doesn’t fix it either- it was strange. I didn’t feel like working in another iFrame within an iFrame- so I cut my loses and used a simple JS pop up script.

But really, it took me all day but it was worth it. What do you think?

Also, incase you stumbled upon this article looking for iCarousel, you don’t have to bend over backwards for the source files, I have re-uploaded them, complete with working horizontal module code, for your convenience- here.


[UPDATE Aug 6th]The other day while writing this, I sent an email to Zendhi Nagao, the developer of iCarousel, saying his page was down and just a day later (yesterday) he relaunched it and sent me the link “http://zendold.lojcomm.com.br is back.” Thanks Zendhi! You should check out his mooCanvas experiments, the fractals one is pretty cool.