So just a week back I took on a weekend 'geek' project. For a project at work we needed a carousel style component. Here is an example:
I started on a Friday morning and was essentially finished on Sunday night. Although I will confess that I have tinkered with it on and off over the last week or so.
I think this component is fairly flexible and does a good job of illustrating how to write a component for the Yahoo! User Interface library.
I was going to wait and write up an article explaining how the component is built. But until I can get that post together, I will point you to the component and the documentation I have already put together for it.
It's not finished. Probably has some code that could be refactored and certainly could use improvements. Based on my testing it works on most recent browsers. Let me know if it is useful or if you think an extended article given as a tutorial for the Y!UI library using the carousel component would be helpful.
Check the out the carousel component here.
8 comments:
That looks and works pretty nice. It speaks well for the Y!UI toolkit that you can put together something like this in a weekend.
Buffering would be a good feature - loading only the next set or 2 in advance of the user requesting them. In theory you could then hook it up to a limitless data set.. though I wonder what the practical limits are in terms of browser memory management / GC.
Actually I have a simple buffering strategy in the sample apps. In the ajax loading example, I do a simple prefetch (2*numVisible). This coupled with the addItem method (which will only fetch if the item has not already been built, gives a poor man's version.
But you are right. I have thought that a generic buffering/caching utility class would be the right approach. It could be used by this and by Live grid-like technology.
Mr. Bill Scott,
Very nice work. I also created a Javascript library that implements the similar functionality using Prototype/scriptaculous. The sample demo is at http://slidinggallery101.pragmaticobjects.org/
The grasses are equally green on both sides :-)
Kevin Hoang Le
http://pragmaticobjects.org
It would be nice to have a forum to ask questions about implementing carousel...
I certainly have some ;)
Daniel, for now feel free to ping me via email
You can reach me at b dot scott at yahoo dot com (sorry for spelling it out but I hate spammers).
There will be an announcement at some point about providing a full support forum for the carousel.
Hi, is the way to get them to appear in a data grid/table(both horizontal and veritcal at the same time) like?
If I understand your question correctly, you are asking how to get a grid of objects scrolling inside a carousel.
One way is for each LIST (LI) item to be rendered with multiple columns of data. For example, you could have an each item in a vertical list have 3 data columns. Then using a vertical scroller it would be like scrolling through a grid.
I don't think the carousel is a replacement for a grid component since you really want to scroll rows in a table, not rows in a list. But it could be done this way if the grid is view only and each row height is the same.
If this is not your question, then please restate what you meant.
Bill,
Thank you so much for sharing your Carousel component. I did alot of research for a carousel object and decided to implement the carousel component you provided. Please have a look and check out the usage on the home page. I used a basic carousel for a picture gallery but was able to implement a second one as the main rotating feature. It turned out really nice. I have received great feedback from everybody about it.
http://tnhomeandfarm.com
Post a Comment