Friday, May 14, 2010

jQuery filmstrips

I needed a simple filmstrip plugin for the when I was building a page for honk.com (see the "Honk Users also look at" section). I browsed several plugins, and tried two: GalleryView, and Scrollable, and ended up using Scrollable.

I had no need for a gallery, mouse-over animations, or timed slideshow options, but most of the tools I found that included filmstrip capability also included many or all of these extraneous features which I would have to disable to get my desired result. What I did need was built in next/previous behavior (but not assets!) and the ability to style the slideshow elements and link them to an external page, rather than a gallery display.

My first attempt used GalleryView, which is not really the best fit for the requirements listed above. While I suspect this is a lovely gallery tool if what you actually want is a photo gallery, I ended up sifting through lots and lots of unnecessary (for my purposes) code in order to strip away the features I didn't need, and while I was left with a working filmstrip, I couldn't style the buttons or filmstrip elements without breaking the functionality of the filmstrip. On top of these woes, I couldn't use anything but 22px x 22px images for the browse buttons. So I scrapped my GalleryView attempt and started over with Scrollable at the suggestion of a coworker.

Scrollable takes the opposite approach: it starts with a simple filmstrip and you add more plugins if you want more functionality. It was perfect for my purposes because it consisted of relatively little code, and allowed me to make the scrollable items whatever kind of element I want, with fast setup and clear documentation. I could tell with very little time commitment that it was going to allow me to build what I needed. The browse buttons could be any size or kind of element I wanted - they are just tagged with a class. The one inflexible requirement is that you must structure your items in divs containing preset numbers of filmstrip elements. I can't say much about the functionality of Scrollable's gallery setup, animation, or other options, because I didn't need them, and so didn't have to touch them, which is the way it should be!

No comments:

Post a Comment