Best jQuery Grid Plugins & Tutorials with Demo

    uSquare – Universal responsive grid html5/jquery

    September 1, 2012 | HTML5, Plugins, Premium, Responsive, Web
    uSquare - Universal responsive grid html5/jquery

    uSquare is a responsive squared grid that can display your content in a unique and interesting way. You can use it for displaying team members, products, services, designs, blog posts or anything else that comes to your mind. In our live preview we have included 3 modifications of the original file in order for you to see how uSquare can serve your purpose.

    While we developed uSquare responsive grid plugin we carefully thought about its responsive layout. We wanted to make sure that all elements are visible and accessible with all resolutions for responsive layout.

    Read More Demo

    Google+ style grid image gallery using jQuery

    August 30, 2012 | Gallery, HTML5, jSON, Plugins
    Google+ style grid image gallery using jQuery

    The main focus of this article will be on the image grid. Let’s start with a look on the features of the original G+ image grid to find out what it takes to recreate it. To illustrate the features I am using Thomas Hawk’s G+ gallery which has some amazing images (check it out).

    Read More Demo

    jQuery Metro Flexible Navigation

    August 13, 2012 | Menus, Plugins, Premium
    jQuery Metro Flexible Navigation

    The jQuery Metro Flexible Navigation is a minimal, clean grid layout inspired by the new Windows 8 interface. It can be customized to be laid out horizontally or vertically. It’s scrollable and dragable at the same time and contains useful sliding controls. Icons can be changed, there is a large collection available.

    Features :

    • Layout orientation can be customized with a simple class atrribute
    • Scroll-able and drag-able with mouse events and touch swipes (iPad compatible)
    • Control buttons for sliding left, right, up and down the grid area
    • Auto-resize based on browser viewport
    • Well documented + free support + free updates
    Read More Demo

    jQuery Animated Responsive Image Grid

    August 6, 2012 | Animation, CSS2 / CSS3.0, Plugins, Responsive
    jQuery Animated Responsive Image Grid

    A jQuery plugin for creating a responsive image grid that will switch images using different animations and timings. This can work nicely as a background or decorative element of a website since we can randomize the appearance of new images and their transitions.The idea is to have a list of images and define the number of columns and rows which will arrange the images into a grid. The remaining images will appear with different animations and delays. With some sizing options we can define how the grid should be laid out for different screen widths.

    This kind of component can work nicely as a background or decorative element of a website since we can randomize the appearance of new images and their transitions.

    Read More Demo

    gridster.js : jQuery plugin for building intuitive draggable layouts

    August 1, 2012 | Drag & Drop, Plugins, Web
    gridster.js : jQuery plugin for building intuitive draggable layouts

    Gridster is a jQuery plugin that makes building intuitive draggable layouts from elements spanning multiple columns. You can even dynamically add and remove elements from the grid.

    Read More Demo

    jSquares – An image collage like the ted.com

    July 30, 2012 | Gallery, Plugins, Popup Window
    jSquares - An image collage like the ted.com

    jSquares is a jQuery plugin that pops up an image and a description in an overlay on hover. It is basically identical to the image grid found on www.ted.com. Works like a charm in IE6+, FF 3+, Safari 3+ and Opera 10.

    Read More Demo

    Portfolio Flipping Slider Using jQuery & CSS3

    July 19, 2012 | Animation, CSS2 / CSS3.0, Slider
    Portfolio Flipping Slider Using jQuery & CSS3

    There are many ways on displaying our portfolio, one of them is using grid style with slider effect for pagination. In this tutorial I’m going to share about how to displaying our portfolio grid with flipping slider effect for pagination using jQuery & CSS3 Transform.

    The slider will change our portfolio images when it’s flipping, this flipping effect is triggered by user click on the pagination. So when user click a page each of our portfolio images will flipping 360 degree and when its animation near end the image will changed with new image.

    We will create four flipping effects that will be used for animation, there are : horizontal left direction, horizontal right direction, vertical top direction and vertical bottom direction. These effects will be randomly choosen when displaying the image.

    Read More Demo

    jQuery Dynamic Grid: XML Gallery

    July 4, 2012 | Gallery, Plugins, Popup Window, Premium, XML
    jQuery Dynamic Grid: XML Gallery

    With Dynamic Grid: XML Gallery you can create the image gallery that you want. The script gives you huge control over the layout and animations, and the possibilities are endless. Literally endless – the script is smart enough to generate unique layouts every time it launches, which means a unique experience for your visitors on every page load.

    With the Dynamic Grid engine you have the power to create exactly the layout you need. And if you don’t know what you need, the script comes with solid default settings that create a beautiful and random layout on every page load!

    Read More Demo

    Responsive 3D Panel Layout in jQuery & CSS3

    June 28, 2012 | CSS2 / CSS3.0, Plugins, Responsive
    Responsive 3D Panel Layout in jQuery & CSS3

    Today we want to share a creative grid layout with you. The layout will contain slides where each one consists of up to four panels. When navigating through them, we’ll animate some separation lines (the “grid”), adjusting the size of the next slide’s panels. The panels will appear with a 3D effect which we will define for each panel.

    Please notice that this is very experimental. It will only work as intended in browsers that support the new CSS properties used here. It was tested in the latest versions of Safari, Chrome, Safari Mobile and Firefox (not as smooth though).

    Read More Demo

    jQuery Dynamic Grid: The Engine

    June 27, 2012 | Animation, Plugins, Premium, Responsive, Web
    jQuery Dynamic Grid: The Engine

    Dynamic Grid is a jQuery plugin for generating an animated, responsive and great looking grid for your content – be it images, news feed, text and what not.

    With the help of some sophisticated algorithms the script fills the grid with cells with (optionally) random heights on every page load, and thus giving the widget a unique layout every time someone loads your page! Additionally, the algorithm is smart enough to prevent cells from being too big for the total size of the widget. Which means at any point in time, there is no cell that is only partially shown or hidden. It just works like it should!

    Number of options:

    • Number of columns
    • Number of rows
    • Random/fixed cell height
    • Padding between columns
    • Fluid/fixed width
    • Height
    • Easing effect
    • Animation speed
    • Animation interval
    Read More Demo