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.

By Manoela Ilic in Playground on
Demo Download

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:
http://www.behance.net/AndrewLili
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):

Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.

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:

$('#tj_container').gridnav({
	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!

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

The process of building a CSS Framework

The Process of Building a CSS Framework

Letter Shuffle Animation for a Menu

Creating 3D Characters in Three.js

Stay in the loop: Get your dose of frontend twice a week

Fresh news, inspo, code demos, and UI animations—zero fluff, all quality. Make your Mondays and Thursdays creative!

Feedback 74

Comments are closed.

  1. Hello…really great job….I need to use multiple grid in the same page…but after 2 it doesn’t work…I’ve followed the istructions of MANUEL

    div id=”tj_container1? class=”tj_container”
    div class=”tj_nav”
    span id=”tj_prev1? class=”tj_prev”
    span id=”tj_next1? class=”tj_next”

    Thank you

  2. Hi. very cool effect, thanks for tutorial. Is it possible to move thumbs from the right to the left ?

  3. Wo0ow very cool tool, please can anyone guide me how to use it with Drupal if possible

  5. I tried using “Manuel” code for mutiple grid on the same page but it’s not working.
    Is there a way of doing this properly. a reply would be much appreciated

  6. On my container that will have all of the list items, when the page loads it gives the container div a style of “visibility:hidden”.

    Any reason why that may be?

  7. In the case someone is having some not expected behaviours in his code, my contribution is for those who had to add different classes for each column, so the logic is broken if you use the sequpdown animation.
    try to change the line 356 (circa), to this code:

    if( dir === 1 ) {

    //well.. when the object have more classes, that logic fails. It must be searched for the value inside the string
    var try1 = ‘tj_row_’ + (currentRow);
    var try2 = ‘tj_row_’ + (currentRow+opts.rows);

    if( row.indexOf(try1) >= 0 ) {
    animParam.opacity = 0;
    }
    else if( row.indexOf(try2) >= 0 ) {
    animParam.opacity = 1;
    }
    else { animParam.opacity = 1;} //just in case, always show
    }
    else {

    var try1 = ‘tj_row_’ + (currentRow – 1);
    var try2 = ‘tj_row_’ + (currentRow + opts.rows – 1);

    if( row.indexOf(try1) >= 0 ) {
    animParam.opacity = 1;
    }
    else if( row.indexOf(try2) >= 0 ) {
    animParam.opacity = 0;
    }
    else {animParam.opacity = 1;} //just in case, always show
    }

    That’s it..

  8. Firstly, thanks for this awesome script! However, I have a question regarding its usage on fluid layout.

    I would like to know how can I make the script recalculate and assign the absolute position (and class for the each li) when I use $(window).resize. Using .gridnav function directly won’t reassign the absolute position when the screen is resized.

    Although it will change the li class (to be the next row), but the previously-assigned class won’t remove when the screen size is made bigger, i.e. if it is assigned with the class of the next row(tj_row_2), tj_row_2 won’t be removed when tj_row_1 is reassigned onto the li.

    Thanks for helping!

  9. Thanks for the nice script, I seem to have an issue though. I am trying to move the navigation arrows closer to the images. When i change ” right:-80px; ” to “right:30px; the buttons cease to work.

  11. 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.

    Thanks.

  12. 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, http://www.rolandgroza.com/work/work.php , 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 🙂

  13. 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..

  14. 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 }); }); });

  15. 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 🙂

  18. 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 🙂

  19. 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?

  21. 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.