Add pagination with jPages

Warning, it's a javascript heavy solution and it might cause some reflows when filtering, but it works!

Download jPages from the github repository (last version required!). Read the documentation and view the demo.

Don't forget to download and include lazy load and also Animate.css in case you want CSS3 animations.

<div id="placeHolder"></div>

<div id="pagination"></div>

<ul id="container">
	<li data-genre="Drama, Sci-Fi, Thriller" data-actors="Harrison Ford, Rutger Hauer, Sean Young, Edward James Olmos" data-director="Ridley Scott">
		... <img src="film.png" data-original="http://ia.media-imdb.com/images/img.jpg" /> ...
	</li>
	<li data-genre="Action, Crime, Drama, Thriller" data-actors="Christian Bale, Michael Caine, Ken Watanabe, Liam Neeson" data-director="Christopher Nolan">
		... <img src="film.png" data-original="http://ia.media-imdb.com/images/img.jpg" /> ...
	</li>
	<li data-genre="Drama" data-actors="Mark Wahlberg, Julianne Moore, Burt Reynolds, Luis Guzmán" data-director="Paul Thomas Anderson">
		... <img src="film.png" data-original="http://ia.media-imdb.com/images/img.jpg" /> ...
	</li>
	...
</ul>
$(function() {

	var container = $("#container"),
		pagination = $("#pagination");

	function setLazyLoad () {
		container.find("img").lazyload({
			event : "turnPage",
			effect : "fadeIn"
		});
    };

	function setPagination () {
		pagination.jPages({
			containerID : "container",
            perPage : 6,
            direction : "auto",
            animation : "fadeInUp",
            callback : function( pages, items ){
                items.showing.find("img").trigger("turnPage");
                items.oncoming.find("img").trigger("turnPage");
            }
		});
	};

	function destroyPagination () {
		pagination.jPages("destroy");
	};

	setLazyLoad();
	setPagination();

	$.filtrify("container", "placeHolder", {
		block : "data-original",
		callback : function() {
			destroyPagination();
			setPagination();
		}
	});

});