GRID NAVIGATION EFFECTS WITH JQUERY

    Rating: ★★★★☆
    View: 198
    Download: 170
    Từ khóa:

    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 will 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):

    1. Default (show/hide)
    2. Fade
    3. Sequential fade
    4. Move/fade
    5. Sequential move/fade
    6. Sequential move/fade reversed
    7. Resize (show/hide)
    8. Disperse
    9. Rows move
    10. Sequential move/fade (3 rows)

    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!

    loading Đang tải...

    template được ưa chuộng