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 June 9, 2011

Demo Download

From our sponsor: Meco is a distraction-free space for reading and discovering newsletters, separate from the inbox.

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!

grid navigation

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.

Grab a Codrops Signature T-Shirt featuring our brand-new logo design! Get an exclusive 20% discount with CODROPSTRIBE20

Feedback ⁷⁴

Comments are closed.

Stephen June 9, 2011 at 15:42

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

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

Hi Mary,

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

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

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

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

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

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

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

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

Oops the html got replaced…
Second try:

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

Previous
Next
Manuel June 9, 2011 at 17:47

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

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

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

@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

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

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

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
  
  Well, I guess that’s why it’s called “dev” or “beta” 😉
Rosell June 10, 2011 at 02:04

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

Awesome Work and beautiful effect! works fine in FF4, chrome 12, safari and even IE7.
assadotcom June 10, 2011 at 08:06

@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.
Bhavin June 10, 2011 at 16:39

I love this little script.. And I love this site.. Thanks ML..
kathy June 10, 2011 at 16:55

super cool. any chance it scrolls horizontally?
Beben Koben June 11, 2011 at 13:11

always amazing jQuery tut’s if landing here 😉
like usually….ck ck ck ^:)^ hohohoho \m/
Jeff June 12, 2011 at 17:43

Would be perfect with sortable/filterable options. Very good job!
Lucas Campanille June 12, 2011 at 21:09

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!
parv June 13, 2011 at 08:47

HI Mary

How can I change the script so that it runs AUTO so that I could use that as Slideshow also ?
Tayssir June 14, 2011 at 21:50

please can anyone tell me how make it work Automatically ? plzzzz its urgent
sarath krishna June 15, 2011 at 11:41

wow..too useful. luv u mary
edis June 15, 2011 at 13:56

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 🙂
Kuldeep daftary June 15, 2011 at 21:42

Best As Always 🙂
Sincere Bankston June 19, 2011 at 08:50

Awesome as always! I’ll definitely have to give you so much credit for inspiration when I launch 🙂
Michel June 20, 2011 at 12:59

Amazing work …
Will try to use this professional.
Thanks Mary Lou for those beauties
Al Kirby June 21, 2011 at 14:14

Innovative. Thanks again. <3 your tuts.
* June 21, 2011 at 17:26

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.
Daz June 21, 2011 at 18:16

I experience the same problems when trying to switch between each. Guess it not refreshing properly 😀

For easing this a very useful url

http://jqueryui.com/demos/effect/easing.html
honlapkeszites June 21, 2011 at 20:00

Interesting effect! Thanks!
Ramit Walia June 22, 2011 at 03:27

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.
Grafics June 22, 2011 at 17:32

Great !
Thanks
VA Lacayo June 23, 2011 at 01:38

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.
Aswad June 23, 2011 at 05:45

Thanks for this amazing effect!
bobthebob June 23, 2011 at 08:46

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?
wesley June 29, 2011 at 10:20

What license does this javascript have? MIT?
Andrew June 30, 2011 at 15:01

Is there anyway to increase the width or number of columns going across?
pradeep July 4, 2011 at 08:40

Really great work and amazing jquery effect.
lee July 7, 2011 at 22:05

how can this be implemented with a database of images and text content through php/mysql? If anyone knows this, I need some pointers.
And Bogard July 11, 2011 at 12:59

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 …..
Dejan: Izdelava spletne strani July 19, 2011 at 09:47

wow… one of the best tutorial and very useful for many things. So Mary, thank you very much!
Manuel July 25, 2011 at 19:05

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
Goodwin August 7, 2011 at 14:09

AMAZING! Love this one! Mary Lou, thank you!

Manoela Ilic

Trigonometry in CSS and JavaScript: Getting Creative with Trigonometric Functions

Progressive Blur Effect using WebGL with OGL and GLSL Shaders

Rock the Stage with a Smooth WebGL Shader Transformation on Scroll

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

Feedback 74

Feedback ⁷⁴