Markup

The first thing we want to do is create some basic markup for our custom controls, the raw HTML could look something like the below and be placed anywhere in the page.

<nav>
	<button id="prev-btn" type="button">Previous</button>
	<button id="next-btn" type="button">Next</button>
</nav>

 CSS

While we could just use our markup as is we are going to give it some styling to make it fit in with the page. Nothing fancy here, just basic layout, position and styling for each of our elements. As these documentation pages use Bootstrap ideally we would have just used some of its' CSS classes to style the markup however for the sake of the example we will style the controls ourselves using the following CSS.

.custom-paging {
	box-sizing: border-box;
	display: block;
	padding: 15px;
	text-align: center;
	margin-bottom: 20px;
	vertical-align: middle;
	background-color: #eee;
	border: solid 1px #ddd;
}
.custom-paging:after {
	display: table;
	content: "";
	clear: both;
}
.custom-btn {
	margin: 0;
	min-width: 80px;
	padding: 10px 15px;
	color: #555;
	border: solid 1px #ccc;
	background-color: #fbfbfb;
}
.custom-btn:hover,
.custom-btn:focus {
	color: #333;
	border: solid 1px #a8a8a8;
	background-color: #FFF;
}
.custom-prev {
	float: left;
}
.custom-next {
	float: right;
}

With these CSS classes our markup now looks like the following.

<nav class="custom-paging">
	<button id="prev-btn" class="custom-btn custom-prev" type="button">Previous</button>
	<button id="next-btn" class="custom-btn custom-next" type="button">Next</button>
</nav>

 JavaScript

When creating custom paging the type option must be set to "default" so FooGallery actually performs the required paging logic. Due to this only the default options are available for use and in this example we do not implement the theme or position options as that is left solely up to the custom CSS and where the markup is placed.

Shows all the default options that can be used.

jQuery(function($){
	$('.foogallery').foogallery({
		"paging": {
			// required
			"type": "default",
			// inherited
			"size": 30,
			"pushOrReplace": "push",
			"scrollToTop": true,
			// ignored
			"theme": "fg-light",
			"position": "none"
		}
	});
});

To hook up our controls we make use of the "ready.foogallery" and "destroy.foogallery" events to setup and then teardown our controls.

ready.foogallery listener

This event is raised once the template is fully initialized and ready to be worked with. It allows us to setup our custom buttons by binding to there click events and then calling the appropriate methods of the FooGallery.Paging instance.

"ready.foogallery": function(e, tmpl){
	// bind the buttons once the template is ready
	$("#prev-btn").on("click.paging", function(e){
		e.preventDefault();
		tmpl.pages.prev();
	});
	$("#next-btn").on("click.paging", function(e){
		e.preventDefault();
		tmpl.pages.next();
	});
}

destroy.foogallery listener

This event is raised when the template is being destroyed and prepared for garbage collection. It allows us to teardown our custom controls by unbinding the click events.

"destroy.foogallery": function(e, tmpl){
	// cleanup the buttons when the template is destroyed
	$("#prev-btn,#next-btn").off("click.paging");
}

 Finished!

That's it, we now have all the pieces to implement our custom paging controls. The below shows the combined output of each of the above examples.

<!-- The custom control markup -->
<nav class="custom-paging">
	<button id="prev-btn" class="custom-btn custom-prev" type="button">Previous</button>
	<button id="next-btn" class="custom-btn custom-next" type="button">Next</button>
</nav>

.custom-paging {
	box-sizing: border-box;
	display: block;
	padding: 15px;
	text-align: center;
	margin-bottom: 20px;
	vertical-align: middle;
	background-color: #eee;
	border: solid 1px #ddd;
}
.custom-paging:after {
	display: table;
	content: "";
	clear: both;
}
.custom-btn {
	margin: 0;
	min-width: 80px;
	padding: 10px 15px;
	color: #555;
	border: solid 1px #ccc;
	background-color: #fbfbfb;
}
.custom-btn:hover,
.custom-btn:focus {
	color: #333;
	border: solid 1px #a8a8a8;
	background-color: #FFF;
}
.custom-prev {
	float: left;
}
.custom-next {
	float: right;
}

{
	"ready.foogallery": function(e, tmpl){
		// bind the buttons once the template is ready
		$("#prev-btn").on("click.paging", function(e){
			e.preventDefault();
			tmpl.pages.prev();
		});
		$("#next-btn").on("click.paging", function(e){
			e.preventDefault();
			tmpl.pages.next();
		});
	},
	"destroy.foogallery": function(e, tmpl){
		// cleanup the buttons when the template is destroyed
		$("#prev-btn,#next-btn").off("click.paging");
	}
}

 Example

Once the custom markup and CSS from above are included in the page the below shows how to initialize FooGallery using the required default paging type and event listeners.

<!-- The FooGallery container element -->
<div id="custom_example_1" class="foogallery fg-responsive fg-light fg-hover-external fg-loading-default fg-loaded-fade-in fg-center fg-gutter-15">
	<!-- items-250x250.json -->
</div>

jQuery(function($){
	$("#custom_example_1").foogallery({
		"items": "../content/items-250x250.json",
		"paging": {
			"type": "default"
		},
		"on": {
			"ready.foogallery": function(e, tmpl){
				// bind the buttons once the template is ready
				$("#prev-btn").on("click.paging", function(e){
					e.preventDefault();
					tmpl.pages.prev();
				});
				$("#next-btn").on("click.paging", function(e){
					e.preventDefault();
					tmpl.pages.next();
				});
			},
			"destroy.foogallery": function(e, tmpl){
				// cleanup the buttons when the template is destroyed
				$("#prev-btn,#next-btn").off("click.paging");
			}
		}
	});
});