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

Previous:
Next:

Tagged with:

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

Website: http://tympanus.net/

Related Articles

Feedback 74

Comments are closed.
  1. 1

    Clicking on the different example options doesn’t seem to load properly until I refresh the whole page. (using Chrome)

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

  3. 7

    Wonderful thanks
    Is it possible to put a little pagination ? in addition of the arrows, show the page numbers… Cheers

  4. 8

    excellent tut, maybe not production ready but definitely a great idea to work with! thx4sharing

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

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

  7. 11

    Oops the html got replaced…
    Second try:

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

    Previous
    Next

  8. 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”

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

  10. 14

    Awesome!!! Like This ^_^
    but it seems there is something that must be refined to be supported by all browsers.

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

  12. 17

    Thank you Mary ;) for the trick.

    But Chrome is steel the smoother of FF and IE. Seems Chrome have the best javascript “engine”.

  13. 21

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

Comments are closed.