Pagination

The Zentools2 pagination layout displays your content in a single row of items. A navbar is positioned above the row of items which can be used to change the items displayed on the page.

 

The pagination layout uses a selection of css transitions to hide and show items on the page when the pagination is triggered.

 

Pagination using the Separator navbar type.

The example below displays the pagination layout using the fade, scale and translate x transitions effects in a 4 item grid.

 

Pagination using the Buttons navbar type.

The layout below displays the pagination layout using buttons for the navbar, in a 3 column marginless grid, using the translate x, and rotate y transition.

 

Pagination using the Navbar type.

The example below displays the pagination layout with content in 5 columns using the fade, scale and translate x transitions.

 

Pagination using boxed layouts.

The example below uses the separator style navbar and boxed style layout for each item.

 

Options and settings

Select a theme

The theme to apply to each item: none and boxed.

 

Disable margin between items

Removes the padding between items in the display.

 

Maximum Columns

The maximum number of columns to display your content in. Please see the responsive grid documentation for understanding how this works.

 

Start page

The page to start the display of items in the module. If the number supplied here is greater than the total number of items the last page in the display will be shown.

 

Maximum number of pager buttons

The maximum number of pager buttons to display in the pagination list.

 

Effects

Determines the effect to be applied to each item as the grid is paginated. You can combine any number of the effects included, however please note that some effects take precedence over others and will cancel opposing effects out. Efefcts include: fade, sclae, translate x, translate y, translate z, rotate x, rotate y and rotate z.

 

Add easing animation

When enabled this adds an easing algorhythm to the animation so that the animation slows down at the start and the end of the transition event.

 

Item delay speed

Determines the time between transitions per items in ms. Set to 0 to have each item appear ont he page at the same time when filtered. Or set to 300 to allow for an elegant scattered display after each time the grid is filtered.

 

Navbar style

The style applied to the pager list above the module content. Includes: none, button, separator, navbar.

 

Hide items until images have loaded

Acts as a preloader that hides the content of the moduel until all of the images in that module have loaded

 

Display loading animation

Option to display a loading animation while the images are loaded in the background.

 

Loading Message

The text used to display while the images are loading. Leave blank to avoid showing any message.