Jason Gordon

I recently got out of a war. A war with drupal, ajax, and jquery. I'd say, as lame as it sounds, this was the hardest dynamic javascript and ajax widget I've written. Here's the lowdown on the requirements and the solution:

1. Generate a list of thumbnails that is horizontally scrollable left and right.
2. The list is the set of thumbnails representing all nodes of a certain type within the system.
3. List must center itself on the current node (carousel displays on node detail pages). This was a bit tricky, not incredibly, but a bit.
4. List must pre-cache 3 pages (5 per page) worth of items, but only show 5 in the carousel window.
5. When navigating to the left or right and the carousel runs out of cached items, it must know if the server has more items in that direction. If it does, the system must grab 5 images from the server, then store those in the list cache.
6. Carousel must have a smooth "slide" animation. When items are returned from server, the carousel must still slide smoothly post load.

Here's the solution I came up with:

1. Create a playlist class on the server.
2. Playlist class has a pager which keeps track of the total number of items, the indexes of first and last in the list, and whether or not there are more to the right and/or left.
3. Playlist knows what to load based on what first and last indexes it receives (from the client).
4. Playlist knows how to offset itself the current node. It receives a node id, then finds where in the list of all nodes this node id is, then determines what offset to pass to the select query.
5. On the client, create a Playlist object (javascript). This playlist object knows: the first index, the last index (from server's playlist object), the starting offset and whether the server has more items in either direction.
6. The client Playlist object maintains an internal pointer (I called current) to the first item in the list of VISIBLE items. 
7. On load, the client playlist determines what the offset should be. This is tricky since it must center itself on the current node in the list. It has 15 items, only 5 are visible, and the current node may be in the middle of the list or at one of the extreme ends.
8. On load, the client playlist determines whether the prev and next arrows are clickable based on the current index.
9. When the prev or next button is clicked, the client playlist determines the answer to this question: will this click put the last item in the visible window beyond what I have? If so, are there more on the server? If so, go get them, stick them on the end of the list, then do the animation. Otherwise, just do the animation.
10. To do the animation, the client playlist determines how many to add to or subtract from the current pointer, in this case 4, since we want 1 of the items from the last set of visible items to still be visible. It then figures out the scrollLeft position of the window based on the width of the item and the new value of the current pointer. It calls jquery's animate method with the scrollLeft value it determined.

That's the gist of it. Of course there was a lot of finger nail biting and trial and error in the middle of it all. But finally, it worked and was mildly elegant overall. I'm generous with the term mildly.

I'm going to post a screenshot of the widget. I'm also going to attach the code files involved. It'll be a big jumbled mess that won't make sense to anyone but me. However, if ever you need a solution for a similar problem, I can definitely talk you through the solution and my code, which I'll gladly give you free of charge. I'd love it if this hard work was useful to someone else.