oday we’d like to share a simple animated grid layout with you. The responsive layout has a sidebar and grid items that animate to a larger content area when clicked. In the first demo the content area fills the grid and in the second demo, the whole layout moves to the left while the grid item is expanding.
Best jQuery Grid Plugins & Tutorials with Demo
Mikado Grid Gallery for WordPress
Mikado is a WordPress image gallery based on random grids with a lot of features.
It’s responsive and images will adapt with a nice and smooth animation when the browser is resized. You just need to decide width (also percentage) and height and Mikado will create a random grid inside the rectangle.
Features:
- Fully responsive and fluid layout;
- Dynamic filters and filtering animations
- Size of the gallery, width and height. The width can be in percentage so it perfect for responsive sites;
- Margin between images;
- 5 Lightboxes;
- WordPress widget;
- Multiple galleries on same page;
- Great for mobile and tablets;
jstiles : jQuery Animated Tiles Plugin
This is a jQuery plugin that works alongside with Bootstrap and helps you create beautiful tiles.
As a jQuery – Bootstrap plugin, in order to use jsTiles you have to include both jQuery and Bootstrap into your project. You also have to include jQuery easing in order to let animations get smoothly executed.
Filterable Product Grid with jQuery & CSS3
A responsive product grid layout with touch-friendly Flickity galleries and Isotope-powered filter functionality.This Blueprint is a responsive Isotope-powered product grid layout where each grid item is a Flickity image slider. A small cart icon animation indicates that a product was added to the shopping cart. The product filter utilizes the Isotope filter functionality. Some example media queries are used to show how to make the layout adaptive.
Pinto : jQuery Grid Layout Plugin
Pinto.js is a lightweight and customizable jQuery plugin for creating pinterest like responsive grid layout. Pinto.js is intended for easy use and is fully deployable within minutes. The minified version is under 1KB.
- lightweight (the minified version is under 1KB)
- autosize support
- fluid item width
- animation (CSS3 transition)
Modularux jQuery – Responsive Grid Facetracking
ModularUX jquery plugin is an easy and customizable content grid maker, built in well-designed javascript and html5 / css3. Use a json file with your sitemap and ModularUX will do the hard work.
Modularux divides in an easy way your web in pieces to an innovate interface with css3 animations. Is easy to use, and you can make it work for any of your webs (html, php, etc.).
REVIEWER : Rating and Review Wizard with jQuery & PHP
REVIEWER is an HTML5/CSS3 review wizard system with progress bar that send the result to your email and summary/thank you email to the user who fill the form. It’s responsive, can be used of other types of forms. You can add how many steps you need.
Features:
- Valid and clean HTML5/CSS3 code
- Bootstrap 3 Based: looks nice on all devices
- Wizard with progress bar
- Rating system
- PHP Working form that send the review data
- Confirmation email to the user who fill the form (plus optional review summary)
- Jquery validation
- Jquery Tweet Feed that support the new API V1.1
