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. @Mary
    I use firefox and chrome.
    I faced the same problem like what Stephen said, the effect goes well after the first refresh, but it seems the demo is now better than ever.

    Keep up the wonderful work.

  2. always amazing jQuery tut’s if landing here 😉
    like usually….ck ck ck ^:)^ hohohoho \m/

  3. I’m having the same problem as well, using the latest version of Chrome. When I load another grid it looks like its reloading the style sheet. Maybe if you reset it before you load again, it doesnt bug. I had the same problem with colorbox, easy fixed with a function

    but very good job on that anyways!

  4. HI Mary

    How can I change the script so that it runs AUTO so that I could use that as Slideshow also ?

  5. Hi Mary,
    congrats on the script,
    this one is really great and very usefull. Can’t really decide which effect i should use, they all are very impressive 🙂

  6. Awesome as always! I’ll definitely have to give you so much credit for inspiration when I launch 🙂

  7. Amazing work …
    Will try to use this professional.
    Thanks Mary Lou for those beauties

  8. Works great in Firefox, but doesn’t work at all in the latest version of Chrome. It doesn’t appear to lay the images out properly or animate them – they just sit on top of each other.

  9. is there anyway that when we click the image and it would maximize ? how can we do that ? can you guys make as a sample.

  10. Hi Mary,

    Awesome script. I am trying to implement it to my own website but I found a problem. I can’t load more then 27 pictures. 3×3 grid and it only shows 3 pages. So if you could plz help me out here because I am lost as to how to add more pages.