jQueryFlipGrid (JFP) is a jQuery plugin that makes a responsive photo gallery grid. Each grid cell has the ability to “flip” and show its back side contents. To provide a brief overview, the plugin works like this: You define your grid cell markup as regular HTML, and then call the plugin. The plugin
parses the markup and hides all of the cells’ “back” content, builds the hover states, and performs all the event binding. The flip effect occurs when cells’ flip icons are clicked,
and grid cell position transitions occur when more cells are added or the viewport changes size. Here are the plugin’s features.
-
Responsive Pinterest-style grid layout with a variable number of columns. You
pick the number of columns you want, and the plugin builds a grid of cells with the same width while resizing the cell height to maintain each cell’s
image aspect ration. -
Cell content flip dialogs.
Each cell can contain optional HTML that is revealed via flip effect on cell flip icon click. -
Cell content flip in place.
There are options to maintain the size of the cell during the flip and maintain its place in the grid, or grow into a modal window. - Grid cell transitions on viewport resize. Grid cells will grow, shrink, and rearrange to fit the viewport.
-
Grid cell categories and controls. Optionally
specify grid cell categories and show and hide cells via category controls. -
Font Awesome Icons.
You love font-awesome, and we do too! Include the font awesome cdn to get all the great icons you see in the demo. -
Real time new cell loading animation.
Slide new grid cells onto the screen or grow them in place, with options to change animation speed. -
Grid cell modal window options.
Options to control the position, width, max height, and flip in place of grid cell modal window. - Grid cell padding options. Change the spacing between the grid cells
- Optional grid cell hover zoom effect.
- Optional grid cell rounded corners.
- Optional grid cell drop shadow.
- Optional modal window page overlay.
- Uses CSS3 transitions and animations. jQuery animation fallback for all the old browsers.
- Multiple grids on the same page..