jQueryFlipGrid is a jQuery plugin that makes a responsive photo gallery grid. Each grid cell has the ability to “flip” and show it’s back side contents. In a nut shell the plugin works like this, you define your grid cell markup as regular HTML 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 that provide the flip effect when cell’s flip icons are clicked and grid cell position transitions 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.
Options to maintain the size of the cell during the flip and maintains 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 we do to. Include the font awesome cdn to get all 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. 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..