Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
JavaScript
Branch: master
Pull request Compare This branch is 23 commits behind douglasmiranda:master.

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
README.markdown
jquery.gridnav.js
jquery.gridnav.min.js

README.markdown

jquery.gridnav - Grid Navigation Effects with jQuery

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

Examples

You can see the examples here

What I've 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',
    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
  • 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

The HTML

<div id="images-container">
    <div class="nav">
        <span id="images-container-prev">Previous</span>
        <span id="images-container-prev">Next</span>
    </div>
    <div class="wrapper">
        <ul class="gallery">
            <li><a href="#"><img src="images/1.jpg" alt="image01" /></a></li>
            <li><a href="#"><img src="images/2.jpg" alt="image02" /></a></li>
            <li><a href="#"><img src="images/3.jpg" alt="image03" /></a></li>
            <li><a href="#"><img src="images/4.jpg" alt="image04" /></a></li>
            <li><a href="#"><img src="images/5.jpg" alt="image05" /></a></li>
            <li><a href="#"><img src="images/6.jpg" alt="image06" /></a></li>
            <li><a href="#"><img src="images/7.jpg" alt="image07" /></a></li>
            <li><a href="#"><img src="images/8.jpg" alt="image08" /></a></li>
            <li><a href="#"><img src="images/9.jpg" alt="image09" /></a></li>
            <li><a href="#"><img src="images/10.jpg" alt="image10" /></a></li>
        </ul>
    </div>
</div>

More info in Examples

Licence

This plugin can be used freely in personal and commercial projects. But just in case, you should read this http://tympanus.net/codrops/licensing/

Something went wrong with that request. Please try again.