List & Grid Post Display

Menggunakan plugin JQuery Masonry dan JavaScript Cookie untuk menciptakan sistem grid/list switcher yang bisa diingat oleh peramban.

by Taufik Nurrohman

HTML

<script src="//dte-project.googlecode.com/svn/trunk/cookie.js"></script>
<script src="//hompimpa.googlecode.com/svn/trunk/Blogger-Masonry-Widget/js/jquery.masonry.min.js"></script>
<nav id="view">
    <a class="grid" href="#">Grid</a>
    <a class="list" href="#">List</a>
</nav>
<div id="main">
    <article class="grid"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p></article>    
    <article class="grid"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</p></article>
    <article class="grid"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud.</p></article>    <article class="grid"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p></article>    
    <article class="grid"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</p></article>
    <article class="grid"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud.</p></article>
    <article class="grid"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo...

CSS

* {
    margin:0;
    padAding:0;
}

#view {
    display:block;
    width:95%;
    margin:10px auto;
}

#view a {
    display:inline-block;
    background-color:darkblue;
    padding:2px 7px;
    text-decoration:none;
    color:white;
}

#view a.active {
    background-color:darkred;
}

#main {
    width:98%;
    margin:10px auto;
}

article {
    display:block;
    background-color:black;
    font:normal 11px Arial,Sans-Serif;
    color:white;
    padding:10px 15px;
    margin:0 10px 10px;
}

article.grid {
    float:left;
    width:100px;
}

JavaScript

(function() {
    
    var $container = $('#main'),
        $article = $container.find('article'),
        $gridNav = $('#view .grid'),
        $listNav = $('#view .list');
    
    // Functions...
    function gridMode() {
        $article.addClass('grid');
        $gridNav.addClass('active');
        $listNav.removeClass('active');
        $container.masonry({
            itemSelector: ".grid",
            isAnimated: true,
            isFitWidth: true
        });
        eraseCookie('list');
        return false;
    }
    function listMode() {
        $article.removeClass('grid');
        $gridNav.removeClass('active');
        $listNav.addClass('active');
        $container.masonry("destroy");
        createCookie('list', null, 7000);
        return false;
    }
    
    // Initialize...
    // If the 'grid' cookie reads
    if (readCookie('list')) {
        listMode();
        eraseCookie('list');
    } else {
        gridMode();
    }
    
    // By user...
    $listNav.click(listMode);
    $gridNav.click(gridMode);
    
})();