Introduction
The iDisplay is a rich Web 2.0 product display widget based on the popular Carousel component and also the product display you may have seen on Apple.com. A screenshot of the latest release can be seen below and new builds can now be downloaded for free from my SVN.
Preview
You can get a technology-preview of the iDisplay by clicking here.
Downloads
You can download the latest build of the iDisplay at Google Code.
Development History
Over the past few weeks I’ve been working on a number of Ajax and Web 2.0 components including some very compact Ajax-Forms that don’t rely on jQuery or prototype and also a few new Ajax menu systems. I’m also involved in a few open-source clones of Web 2.0 objects that caught my attention during day-to-day browsing of software sites.
One such component is a clone of Apple.com’s product display slider. (http://www.apple.com/mac) - a real piece of eye-candy. See below for a screenshot:
The reason I decided to spend a little time on this particular component was because a number of developers had expressed their interest in creating their own version of the product display and it didn’t look like it would be a mammoth task to adapt some code to something a little more customizable.
Problems encountered along the way
For starters..Apple’s source code to the original product display was not the most friendliest thing in the world to read. I doubt it was originally written with further customization in mind and like many big corporations these days, they seem to have cared more about the code working rather than being tidy or organized. This would mean quite a bit of refactoring work if it was going to help contribute in any way towards a final solution.
At this point I would like to note that I’m also working away on a new component codenamed SmoothSlider (Free of anything Apple ; ) which I personally prefer over the iDisplay, but I’ll stay on topic for now!.
On playing around with Apple’s code I first thought that perhaps they had gone all the way and included a reflection class to perform css reflections on their images- no such luck. All of the images you see in Apple’s product display not only already have their shadows and reflections statically added - they also have their backgrounds flattened in too - a big no, no in my eyes. If I was coding up the original I would have used transparent PNG’s and definitely added the reflections class in there to make it easier to update product images on the go. Whilst the first version of my iDisplay doesn’t use reflections.js (I’m still working out the kinks with the implementation), it does make it easier for you to:
- Add in your own product images (products have a dedicated image folder)
- Add in your own categories
- Use your own theme (display background image, slider background image etc.)
- Add to your website (customized) in under 20 minutes.
Between work for clients and developing commercial components, updates to the iDisplay may only appear once a month, but I do intend on adding some additional features such as:
- Possible support for ImageEffects.js (a library for performing dynamic image effects in j/s)
- Definite support for reflections.js
- Fade in or slider captions for categories (example. when you hover over a category or an item, a description will pop-up) - I think this might be rather intuitive for any shops that wish to display their range in an area no larger than the header
Compatability
I’ve recently started using BrowserShots.org more frequently - a great tool which has inspired me to get into the habit of developing work in a browser that best follows the most correct definitions of both recent xHTML and CSS standards. By my logic, if you develop your web applications or components in the most picky browser(s) available, you’ll end up saving time with browsers who support looser definitions such as FireFox. At the moment, my pick du jour is Apple’s Safari 3.1 for Windows.
The iDisplay currently renders fine in FireFox 2.0, 3.0, Safari 3.1, Netscape Navigator, Opera 9.0 and Internet Explorer 7.0 and 8.0. I’ve noticed some issues with anything under IE 7.0, but hopefully these will be resolved in future versions.
