A cross-browser implementation of jCarousel Lite (non-circular)
I've been working with jQuery and Ganeshji Marwaha's jCarousel Lite to produce a non-circular dynamic galley using images pulled from a folder using the FSO (File System Object). The images are of different dimensions so I re-sized them on the fly and centered them horizontally and vertically in divs (to look like slides).
After incorporating a modified version of Jeremy Thibeaux's non-circular carousel fix (where scrolling to the end does not work if the number of items is not divisible by the scroll amount), I browser tested the carousel in Firefox 2 & 3, Opera 9, Safari 3 and IE6 & 7.
It functioned as expected in everything except IE6 where the last item was rendered below the first item, meaning the last strip of the carousel misses it's last element.
The easiest way to get IE6 to play ball was to add an additional 'dummy' list item after the last real item (inserted using a conditional comment) and, using browser sniffing in the JavaScript, give adjusted values to IE6 so that the 'dummy' item is ignored in the scroll.
Comments
Mark: Thanks for this good work. We're incorporating this as part of a scroller on a project for my newspaper, the St. Petersburg Times.
thanks, Mark. Great work and great functionality across multiple browsers.
I had the same problem with IE6 and the last element not displaying, so I created the dummy element with the condition and in the CSS all I did was.dummy{ display:none;}This way there was no need to modify the JS script of jcarousel. Hope this is useful.
Leave a comment