Paginated image gallery using Ojay.Paginator

In this example we demonstrate how to use Ojay.Paginator to condense a selection of pre-existing page content into a smaller, scrollable area, providing a GUI for the user to scroll between pages. The paged navigation is tracked using Ojay.History so that individual pages of the gallery can be bookmarked.

The page content simply consists of a list of twelve floated <div class="item"></div> elements, each containing a 150×100 image. Without JavaScript, they display as a 4×3 grid according to the stylesheet. If JavaScript is enabled, the paginated interface is created.

JavaScript source code

Stylesheet