Grid Navigation Effects with jQuery

Today we want to share some neat grid navigation effects using jQuery. In our examples we will show you ten ways how to navigate through a set of thumbnails. We'll take a look at some of the possibilities and how to apply the effect.

From our sponsor: Try Mailchimp today.

Today we want to share some neat grid navigation effects using jQuery. In our examples we will show you ten ways how to navigate through a set of thumbnails. We’ll take a look at some of the possibilities and how to apply the effect.

The images used in the demos are by Andrew and Lili and you can see their Behance profile here:
The images are licensed under the Creative Commons Attribution-NonCommercial 3.0 Unported License.

Take a look at all the examples (you can also navigate from them to all the other examples):

You can use the mousewheel to navigate through the thumbnails.

The HTML structure that the script is based on is basically a list of element and some navigation arrows wrapped by a container with class and id “tj_container”.

Let’s see an example for using the sequential move/fade:

	rows	: 2,
	navL	: '#tj_prev',
	navR	: '#tj_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

We hope you like these little effects and find them useful!

Tagged with:

Mary Lou

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 74

Comments are closed.
  1. Hi Mary….,

    This is amazing. I wonder if the grid could auto play without click on the arrow. So the grid can perform auto rotating.


  2. Hello,

    Great script, it runs smooth and nice 🙂

    But I am having some problems with it and I wonder if you could help me out, or someone around here.

    Here is my web page, , I implemented it there. But it seems that it doesn’t run as it supposed to.
    I don’t know if you notice the distance between the thumbs, between the bottom of the row one and top of the row two, there is no distance. I would like to have the same distance as it is between the thumbs. Could there something be done ? Because through CSS nothing happens, I already tried.

    And another bug it will be the flash you get when entering the page, first all the items are displayed and only after a while it refreshes and displays only two rows. Why is that ? And how can I fix that problem ?

    Thank you for your support and keep up the good work 🙂

  3. Superb Script! EXACTLY what I was looking for, thank you!!

    Im new to jquery, could anyone help me out with how to make the nav buttons loop instead of just stopping at the end of the list?

    EG: when you get to the end of the list of thumbs, clicking “next” returns you to the top of the list, ie; displays the first row of thumbs again.

    and equally with “previous”, when you get to the top of the list, clicking “prev” would return you to the bottom and display the bottom 2 rows of thumbs..

  4. Awesome plugin. I just use on a website and did a little tweak to integrate facebox to preview large images.
    //After line 728 $thumbs.find('a').each( function(i) { var $link = $(this); $link.bind("click", function(e){ e.preventDefault(); var img_link = $(this).attr('href'); $.facebox({ image: img_link }); }); });

  5. Hi Mary,

    I always love your work. However, I’ve gone a bit brain dead.

    Could you or any one here point me in the right direction of allowing the thumbs become lightbox links?

    Jammy dodgers 🙂

  6. This is really great, thank you so much for sharing! I can’t wait to play with this.

    One thing that might be really useful to add in the future is possibly to simply add some CSS class or something to the nav buttons when the user has reached the bottom or gone all the back to the top.

    For example, right now it’s a little confusing when the user clicks to go down, they reach the bottom, but continue to click with nothing happening. If maybe when you reached the bottom a CSS class were added to navR element, then you could style it with something, like maybe fading it out or something so the user knows they’ve hit the bottom. Then, when they go back up and reach the top, the same thing happens to navL.

    Anyway, just a thought. Once again, thanks so much for this 🙂

  7. Thanks for the great script, I do have a question though.

    Would it be possible to setup multiple gridnav elements on the same page?

    Lets say I want to have 3 galleries all with gridnav functionality on the same page, is this possible?

  8. Hello.
    This is my first time using this script . I am using disperse effect. i have 9 images that are grouped in 3 column and 3 row .
    everything works with exception that , script select row 1 and 2 . even though only shows row 1 . when clicking next , row 1 and 2 hidden an row 3 shows . i can not figure why row 2 is not hidden when i display row 1 .
    any info would be appreciate.