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() {
var $grid = $('#grid');
$grid.shuffle({ itemSelector: '.item' });$('#filter a').click(function (e) { e.preventDefault();
$('#filter a').removeClass('active'); $(this).addClass('active');
var groupName = $(this).attr('data-group');
});
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