EXPANDING FULLSCREEN GRID PORTFOLIO

    Rating: ★★★★☆
    View: 186
    Download: 169
    Từ khóa:

    Today we want to share a neat experimental portfolio template with you. The main idea is to have a grid layout that we create with jQuery Masonry. Clicking to view more, we expand the according item to fullscreen in order to show a longer description of the item and a representative fullscreen background image.

    Each item has a little slideshow of thumbs which will be animated to the right position once the portfolio item gets “expanded”. If you know Flipboard for the iPad, then you might recognize this effect we got inspired with.

    The beautiful images are by Kyle van Horn, check out his Flickr Photostream.

    jQuery Masonry is by David deSandro

    The HTML for an item in the portfolio is the following:

    Personal Works

    Concept & Design

    Some short introduction View project

    A longer description...

    We use a jQuery template for the fullscreen structure:
    
    

    When loading the page, we have the initial grid view:

    And when we click on “View Project”, the fullscreen mode will be loaded:

    We hope you like this little experiment and find it useful!

    loading Đang tải...

    template được ưa chuộng