From our sponsor: Chromatic - Visual testing for Storybook, Playwright & Cypress. Catch UI bugs before your users do.
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):
- Default (show/hide)
- Fade
- Sequential fade
- Move/fade
- Sequential move/fade
- Sequential move/fade reversed
- Resize (show/hide)
- Disperse
- Rows move
- Sequential move/fade (3 rows)
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!
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
Hi. very cool effect, thanks for tutorial. Is it possible to move thumbs from the right to the left ?
Wo0ow very cool tool, please can anyone guide me how to use it with Drupal if possible
Hi Mary! This jquery gallery is free to personal and comercial use?
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
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?
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..
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!
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.
Thanks for all darling
Hi Mary….,
This is amazing. I wonder if the grid could auto play without click on the arrow. So the grid can perform auto rotating.
Thanks.
Hello,
Great script, it runs smooth and nice 🙂
But I am having some problems with it and I wonder if you could help me out, or someone around here.
Here is my web page, http://www.rolandgroza.com/work/work.php , I implemented it there. But it seems that it doesn’t run as it supposed to.
I don’t know if you notice the distance between the thumbs, between the bottom of the row one and top of the row two, there is no distance. I would like to have the same distance as it is between the thumbs. Could there something be done ? Because through CSS nothing happens, I already tried.
And another bug it will be the flash you get when entering the page, first all the items are displayed and only after a while it refreshes and displays only two rows. Why is that ? And how can I fix that problem ?
Thank you for your support and keep up the good work 🙂
Superb Script! EXACTLY what I was looking for, thank you!!
Im new to jquery, could anyone help me out with how to make the nav buttons loop instead of just stopping at the end of the list?
EG: when you get to the end of the list of thumbs, clicking “next” returns you to the top of the list, ie; displays the first row of thumbs again.
and equally with “previous”, when you get to the top of the list, clicking “prev” would return you to the bottom and display the bottom 2 rows of thumbs..
Awesome plugin. I just use on a website and did a little tweak to integrate facebox to preview large images.
//After line 728 $thumbs.find('a').each( function(i) { var $link = $(this); $link.bind("click", function(e){ e.preventDefault(); var img_link = $(this).attr('href'); $.facebox({ image: img_link }); }); });
Hi Mary,
I always love your work. However, I’ve gone a bit brain dead.
Could you or any one here point me in the right direction of allowing the thumbs become lightbox links?
Jammy dodgers 🙂
Never mind, silly me worked it out. Thanks for the continuous inspirations.
Jammy Dodgers
How do you change space between images. I wanted to make them closer ?
This is really great, thank you so much for sharing! I can’t wait to play with this.
One thing that might be really useful to add in the future is possibly to simply add some CSS class or something to the nav buttons when the user has reached the bottom or gone all the back to the top.
For example, right now it’s a little confusing when the user clicks to go down, they reach the bottom, but continue to click with nothing happening. If maybe when you reached the bottom a CSS class were added to navR element, then you could style it with something, like maybe fading it out or something so the user knows they’ve hit the bottom. Then, when they go back up and reach the top, the same thing happens to navL.
Anyway, just a thought. Once again, thanks so much for this 🙂
Thanks for the great script, I do have a question though.
Would it be possible to setup multiple gridnav elements on the same page?
Lets say I want to have 3 galleries all with gridnav functionality on the same page, is this possible?
Really nice. It’s so attractive. Thanks for share it with us.
Hello.
This is my first time using this script . I am using disperse effect. i have 9 images that are grouped in 3 column and 3 row .
everything works with exception that , script select row 1 and 2 . even though only shows row 1 . when clicking next , row 1 and 2 hidden an row 3 shows . i can not figure why row 2 is not hidden when i display row 1 .
any info would be appreciate.
sorry for comment again .
can you please tell me how they did this using your code.
http://livedemo00.template-help.com/zencart_35885/index.php?main_page=index
there are 9 image , 1 row 3 column . trying to do same effect for 2 days now , but i can not figure it out.
thanks.
sorry , figured it out .
i had to set to 1 row in gridnav.js .
thanks