FilmStrip.js « Eskay

A horizontal and vertical pagination, provides an easy to use smooth pagination tool.

var myFilmStrip = new FilmStrip(element, [, options]);

element - (string) The string id of an Element that contains the viewPort, filmStrip, and elements
options - (object, optional) The options object, plus the options described below:

viewPort: the css selector of the view port, defaults to ‘.viewPort’
filmStrip: the css selector of the film strip element, defaults to ‘.filmStrip”
btnNext: the css selector of the next button, defaults to ‘.btnNext’
btnPrev: the css selector of the next button, defaults to ‘.btnPrev’
scrollDir: the direction you wish your film strip to scroll (vertical, horizontal), defaults to horizontal
items: the css selector of the elements that are paginated
itemPerPage: the number of items to show per page, defaults to 4
duration: the speed you wish the page transition to go, defaults to short
initialPage: the initial page to load, defaults is 0

1 - set a width and height on your viewPort

2 - initialize JavaScript inside of an onDomReady (examples below)

ex. horizontal paging

            
	var myxFilmStrip = new FilmStrip('myFilmStrip', {
		scrollDir: 'horizontal',
		items: 'li',
		itemsPerPage: 5
	});

vertical paging


	var myxFilmStrip = new FilmStrip('myFilmStrip', {
		scrollDir: 'vertical',
		items: 'li',
		duration: 'long',
		itemsPerPage: 5
	});

for now just email me if you have any questions scott.keller@blastradius.com

Interface Developer