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

From our sponsor: Reach inboxes when it matters most. Instantly deliver transactional emails to your customers.

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):

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!

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.

http://www.codrops.com

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

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 74

Comments are closed.
  1. great work Mary!

    I’ve been trying unsuccessfully to hack it a bit for some larger images in a 3 x 2 grid… but when I change the ‘width’ attribute in the CSS it doesn’t seem to recalculate properly and the entire list is off-center (floated to the left)… any ideas?

  2. how can this be implemented with a database of images and text content through php/mysql? If anyone knows this, I need some pointers.

  3. Hi Mary,

    Thanks for sharing that great piece of work. I did modify it to load images for a directory based on a click event. For some reasons, the images are shown, but the scroll effect is not working anymore.

    Basically, what I am doing is replacing the elements with a new one for the new images from the clicked folder.

    Do you have any idea why this happen? and may be how to solve it.

    Thansk …..

  4. wow… one of the best tutorial and very useful for many things. So Mary, thank you very much!

  5. Could anyone make my day and post some code on how to hide the navigation arrows when the beginning or the end of the gallery has been reached?

    (or hide the navigation arrows altogether when there are simply not enough images in the gallery for a second row)

    Greetings,
    Manuel

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

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

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

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

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

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

  12. 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!

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