Jquery alternative isotope free untuk filterable portfolio

Halo sobat coding dimanapun sobat berada, semoga tetap semangat pantang menyerah dalam mencari yang gratis gratis...hehe

Pada kali ini kami team archives code akan menuliskan artikel tentang jquery alternative isotope free untuk filterable portfolio untuk arsip kami pribadi dan untuk sobat semua yang menemukan artikel ini

Pernahkan kita membuat filterable portfolio dengan menggunakan jquery isotope. taukah dobat sekalian jika isotope adalah jquery berbayar jika digunakan untuk commercial / di jual ulang

Dan ternyata ada jquery yang free atau gratis dengan MIT license yang dapat kita gunakan untuk membuat filterable portfolio seperti jquery isotope. yaitu jQuery plugin shuffle.js.

Baiklah untuk sobat pecinta gratisan, untuk markup htmlnya adalah

pertama kita includekan jquery dan jquery shuffle.js ke html kita

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script src="jquery.shuffle.min.js"></script>

Dilanjut kemudian sobat semua buat markup untuk htmlnya :

<ul id="filter">

    <li><a class="active" href="#" data-group="all">All</a></li>    <li><a href="#" data-group="red">Red</a></li>    <li><a href="#" data-group="green">Green</a></li>    <li><a href="#" data-group="blue">Blue</a></li>    <li><a href="#" data-group="numbers">Numbers</a></li>    <li><a href="#" data-group="letters">Letters</a></li>    <li><a href="#" data-group="square">Squares</a></li>    <li><a href="#" data-group="circle">Circles</a></li></ul>
<div id="grid">    <div class="item blue"  data-groups='["all", "numbers", "blue", "square"]'>3</div>    <div class="item green" data-groups='["all", "numbers", "green", "square"]'>5</div>    <div class="item blue"  data-groups='["all", "letters", "blue", "square"]'>D</div>    <div class="item red"   data-groups='["all", "numbers", "red", "square"]'>1</div>    <div class="item red circle"   data-groups='["all", "numbers", "red", "circle"]'>4</div>    <div class="item red"   data-groups='["all", "numbers", "red", "square"]'>7</div>    <div class="item green circle" data-groups='["all", "numbers", "green", "circle"]'>8</div>    <div class="item red"   data-groups='["all", "letters", "red", "square"]'>B</div>    <div class="item green" data-groups='["all", "numbers", "green", "square"]'>2</div>    <div class="item green circle" data-groups='["all", "letters", "green", "circle"]'>C</div>    <div class="item blue"  data-groups='["all", "numbers", "blue", "square"]'>9</div>    <div class="item red"   data-groups='["all", "letters", "red", "square"]'>E</div>    <div class="item blue circle"  data-groups='["all", "letters", "blue", "circle"]'>G</div>    <div class="item blue"  data-groups='["all", "letters", "blue", "square"]'>A</div>    <div class="item blue"  data-groups='["all", "numbers", "blue", "square"]'>6</div>    <div class="item green" data-groups='["all", "letters", "green", "square"]'>F</div></div> 

Kemudian kita buat css nya

#container {width: 960px; margin: 0 auto;}
#filter {list-style-type: none; margin: 0; padding: 0}#filter li, #filter a {display: block; float: left; margin: 0}#filter a { background: #ddd; border: 1px solid #666; text-decoration: none; padding: 5px 10px;}#filter a.active {background: yellow;}
#grid {clear: both; position: relative}.item {width: 230px; height: 230px; background: grey; float: left; margin-right: 10px; margin-bottom: 10px; color: #fff; font-size: 60px; text-align: center; line-height: 230px; cursor: default;}.red {background: red;}.green {background: green;}.blue {background: blue;}.circle {border-radius: 230px;} 

Kemudian kita buat custom jquery nya untuk settingan shuffle.js nya

$(document).ready(function() {    
    /* initialize shuffle plugin */    var $grid = $('#grid');        
    $grid.shuffle({        itemSelector: '.item' // the selector for the items in the grid    });$('#filter a').click(function (e) {    e.preventDefault();        
    // set active class    $('#filter a').removeClass('active');    $(this).addClass('active');        
    // get group name from clicked item    var groupName = $(this).attr('data-group');        
    // reshuffle grid   
}); 

Cukup mudah dan pasti sobat sekalian dapat mengerjakannya

Barangkali demikian pembahasan mengenai kquery alternative isotope free untuk filterable portfolio yang dapat kami sajikan untuk sobat, tentunya masih butuh pembaharuan dengan menunggu masukan dari sobat semua, demi menuju kesempurnaan

Dan bila ada masukan atau ada hal yang perlu diperbincangkan, maka bisa sobat sampaikan pada kolom komentar yang telah disediakan, atau langsung pada halam contact us juga boleh

Mudah mudahan sobat puas dengan artikel yang penuh dengan kekurangan itu, dan semoga bermanfaat

Share this post