In Playground by Mary Lou June 9, 2011 74 Comments

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.

View demo Download source

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!

View demo Download source

Tagged with: effect grid jQuery Navigation thumbnails

Mary Lou

Mary Lou (Manoela Ilic) 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.

View all contributions by Mary Lou

Website: http://tympanus.net/

Feedback ⁷⁴

Comments are closed.

Stephen June 9, 2011 at 15:42

1

Clicking on the different example options doesn’t seem to load properly until I refresh the whole page. (using Chrome)
Mary Lou June 9, 2011 at 15:49

2

Hi Stephen, can you tell me what exactly is happening? Cheers, ML
hoko June 9, 2011 at 15:54

3

Hi Mary,

Did you check it with IE 7?
Stefan June 9, 2011 at 15:57

4

With which browsers is this compatible?
gianluca June 9, 2011 at 15:57

5

how can i remove the auto scroll?
andrea June 9, 2011 at 16:00

6

Nice tut! But is there a way to improve javascript performance with Firefox?

Because the animations are a bit choppy.. In chrome looks awesome :)
Ravaka June 9, 2011 at 16:13

7

Wonderful thanks
Is it possible to put a little pagination ? in addition of the arrows, show the page numbers… Cheers
Martin V June 9, 2011 at 17:31

8

excellent tut, maybe not production ready but definitely a great idea to work with! thx4sharing
Manuel June 9, 2011 at 17:45

9

Dear Mary Lou,

Thanks for publishing this great script!

If anyone is searching for how to put multiple grid navigations on one page:

Based on example 6:
You can replace “1″ with as many numbers as you require grids…

In the java:
—————–
$(‘#tj_container1′).gridnav({
navL : ‘#tj_prev1′,
navR : ‘#tj_next1′,
type : {…

In the html:
—————–

Previous
Next

Again thanks for this beautiful script, great work!

Greetings,
Manuel
Wang June 9, 2011 at 17:45

10

About chrome problem, I think some file we doesn’t have sufficient permission to perform on your host.

You can try $ chmod a+x /host/path/demo/*

Please check file permission.
Manuel June 9, 2011 at 17:46

11

Oops the html got replaced…
Second try:

In the html:
—————–
In the html:
—————–

Previous
Next
Manuel June 9, 2011 at 17:47

12

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”
Micha? June 9, 2011 at 18:10

13

Wow guys… this is really one of your best work. I love all the scripts but I didn’t comment before – I think I will use this with Nextgen for WordPress, as I need pagination but hate the original solution.
assadotcom June 9, 2011 at 18:21

14

Awesome!!! Like This ^_^
but it seems there is something that must be refined to be supported by all browsers.
Mary Lou June 9, 2011 at 18:40

15

@Andrea I think it has to do with the CSS3 transitions, I’ve removed them now and it seems smoother.

@Assa Can you tell me what is not working? Because it works fine in the latest versions of Chrome, Firefox, Safari and also IE9/IE8/IE7 over here :)

Thank you all! Cheers
e11world June 9, 2011 at 21:04

16

Amazing work as usual Mary! Very nicely done.
Andrea June 10, 2011 at 00:43

17

Thank you Mary ;) for the trick.

But Chrome is steel the smoother of FF and IE. Seems Chrome have the best javascript “engine”.
dadokkio June 10, 2011 at 00:55

18

I’ve some problem with Chrome too.
In same cases pictures are almost stacked and I need to refresh a lot of times to see effects.

screenshot https://skitch.com/dadokkio/fd92y/grid-navigation-effects-with-jquery

Browser Chrome 13 dev
- Mary Lou June 10, 2011 at 01:18
  
  19
  
  Well, I guess that’s why it’s called “dev” or “beta” ;)
Rosell June 10, 2011 at 02:04

20

Again great work your guys.
Break Balls!
Sounkay June 10, 2011 at 05:34

21

Awesome Work and beautiful effect! works fine in FF4, chrome 12, safari and even IE7.

Comments are closed.

Related Articles

Stay connected with us:

Feedback 74

Feedback ⁷⁴