fliptopbox / jquery.stripe

A jQuery plug-in to create a cool striped gallery object.


You have a gallery of images, and you are tired of the same old gallery plug-ins, you want something that reminds you of a shredder, well that is this.

Things to note: The height of the gallery is determined by the height of the smallest image. The images are proportionately down scaled to fit, and preserve image quality. You can use a combination of portrait and landscape images. Navigation buttons, and auto animate settings are available, see OPTIONS below. The auto-animation timer is paused if you hover over the gallery or the navigation buttons, and reactivated onMouseout. There is a calculated maximum image width to ensure an image doesn't consume the entire width of the gallery, this width depends on the number of images, and the 'min-width' option.

(Photography provided courtesy of Bruce Thomas. All rights reserved.)


For example: $('.gallery').stripe({ 'automatic': true, 'buttons': true, 'delay': 5000, 'min-width': 20 });

key type default description
ms number 750 millisecond delay for animation speed
delay number 5000 (5 seconds as milliseconds) millisecond delay for "automatic animate" mode
automatic boolean false activate the auto animate time interval
min-width number 10px the smallest width of the collapsed slices
buttons boolean false do you want next/previous button navigation

This is a proof of concept plug-in, please jump right in and fork it on GITHUB. It could do with some callback methods, better handling of the alt text presentation, auto-animate sequentially option, and other nice stuff. If you want to see this plug-in in action you can find it here.