jquery.gridnav's Introduction

Grid Navigation Effects with jQuery

jquery.gridnav, presented by Mary Lou on Codrops, is the jQuery plugin for grid navigation through a set of thumbnails. Is perfect for galleries, featured images or what else you want.

Screenshots

Examples

You can see the original examples here

You can download and see the new features on the example/example.html.

What Changed?

Originally the plugin do not provide the option "auto", that is, to see more images you have to click in "next" or "prev" button.

I added a way to do this.

How?

The "timeout" option have to be added when initializing the plugin.

$(function() {
    $('#images-container').gridnav({
        type: {
            timeout: 4000
        }
    });
});

Then, every 4 seconds the images will move automatically.

What others options do I have?

$('#images-container').gridnav({
    rows: 2,
    navL: '#images-container-prev',
    navR: '#images-container-next',
    navDots: '#images-container-dots',
    type: {
        mode: 'sequpdown',
        speed: 400,
        easing: '',
        factor: 50,
        reverse: false
    }
});

The following parameters can be used/set:

rows: the number of rows to be shown in the grid
navL/navR: the selectors for the previous and next navigation elements
navDots: the selectors for dots elements
mode: the type of animation; you can use def | fade | seqfade | updown | sequpdown | showhide | disperse | rows
speed: the speed of the animation for fade, seqfade, updown, sequpdown, showhide, disperse, rows
easing: the easing effect for fade, seqfade, updown, sequpdown, showhide, disperse, rows
factor: delay between each item animation for seqfade, sequpdown; amount of pixels the row move when using rows
reverse: for reversing the order when using sequpdown