Cara Membuat Filterable Gallery & Portfolio Menggunakan Filterizr.js

Filterable Gallery adalah sebuah komponen UI dalam website yang digunakan untuk menampilkan kumpulan gambar, video atau media lain yang memiliki fitur filtering, sorting, dan bahkan searching.

Galeri sering kali dibutuhkan ketika kita perlu menyajikan banyak gambar ataupun video sekaligus pada sebuah website. Sebuah galeri memiliki beberapa fitur yang menunjang pengguna agar mudah memilih dan mengidentifikasi foto, video atau media lain pada galeri tersebut.

Fitur-fitur tersebut biasanya sudah terdapat pada beberapa plugin jquery untuk galeri yang sudah tersebar di internet.

Kebanyakan plugin-plugin galeri yang ada biasanya merangkap sebagai slider atau carousel. Pada tutorial ini saya akan membahas plugin galeri yang berbeda dari biasanya. Seperti namanya, Filterizr.js memiliki fitur filtering, sorting, dan bahkan searching.

Sebenarnya, plugin ini tidak hanya bisa digunakan sebagai galeri, tetapi juga media lain seperti post, katalog dan sebagainya.

Screenshot Filterable Gallery

Kelebihan dari plugin ini adalah Highly Customizable alias sangat mudah untuk dimodifikasi sesuai kebutuhan kita. Tidak ada file css atau style default yang harus di masukkan ke dalam project sehingga kita bebas mengatur style kita sendiri.

Grid yang ada pada galeri kita atur sendiri lebar dan jumlahnya, Filterizr.js hanya menyesuaikan. Untuk membuat Filterable Gallery menggunakan Filterizr.js, mari kita ikuti langkah-langkah di bawah ini.

Markup HTML

Sebelumnya, jangan lupa untuk menambahkan jquery dan filterizr.js pada bagian tag <head> atau sebelum tag </body>.

<script type=”text/javascript” src=”jquery.min.js”></script>
<script type=”text/javascript” src=”jquery.filterizr.min.js”></script>

Berikut adalah markup untuk container Filterable Gallery.

<div class=”port-gallery”>
<div class=”filterizr-control”>

</div>
<div class=”filtr-container”>

</div>
</div>

Ada 2 markup yang penting dalam membuat Filterable Gallery menggunakan Filterizr.js, yaitu :

Markup HTML untuk Control (Filter, Sort, dan Search)

<div class=”filterizr-control”>
<ul class=”filterizr-filter”>
<li class=”filtr-active” data-filter=”all”>All Categories</li>
<li data-filter=”1″>Web Design</li>
<li data-filter=”2″>Front-end Dev</li>
<li data-filter=”4″>Codeigniter</li>
</ul>
<ul class=”filterizr-sorting”>
<li>
<span>Sort by :</span>
<select data-sortOrder>
<option value=”title”> Title </option>
</select>
</li>
<li class=”filtr-active” data-sortAsc>Asc</li>
<li data-sortDesc>Desc</li>
<li data-shuffle>Acak</li>
</ul>
</div>

Class filterizr-control, filterizr-sorting, filterizr-filter, dan filtr-active bukanlah class baku dari plugin filterizr.js. Ini hanya class yang saya buat sendiri agar lebih deskriptif dan akan saya gunakan dalam initial javascript berikutnya.

Elemen div filterizr-filter berisi list filter atau kategori untuk setiap item. Sedangkan di dalam filterizr-sorting berisi elemen-elemen untuk markup sorting.

Semua atribut dengan awalan data- merupakan atribut baku dari filterizr.js yang harus anda masukkan.

Markup HTML untuk Item

<div class=”filtr-container”><div class=”filtr-item” data-category=”2″ data-title=”128 Web – HTML Website Template”>
<img src=”https://www.devaradise.com/id/wp-content/uploads/sites/4/2018/07/128-web-300×171.jpg” alt=”128 Web Website Template” />
<div class=”desc”><a href=”https://lab.devaradise.com/128web” target=”_blank” rel=”noopener”>128 Web – HTML Website Template</a></div>
</div><div class=”filtr-item” data-category=”4″ data-title=”Website BLK Bekasi”>
<img src=”https://www.devaradise.com/id/wp-content/uploads/sites/4/2018/07/blkbekasi-300×171.jpg” alt=”Website BLK Bekasi” />
<div class=”desc”><a href=”#” target=”_blank” rel=”noopener nofollow”>Website BLK Bekasi</a></div>
</div>…
</div>

Class filtr-container dan markup dalam class filtr-item juga bukan class baku dari filterizr.js. Satu-satunya class baku yang harus anda gunakan agar plugin dapat bekerja adalah div dengan class filtr-item yang digunakan pada setiap item galeri.

Di dalam div filtr-item anda bebas bisa memasukkan apa saja. Setiap item harus di atur lebar (width) menggunakan persen (%) untuk grid. Sedangkan untuk tinggi (height), sebaiknya disamakan setiap itemnya baik langsung di definisikan di class filtr-item atau pada elemen di dalamnya.

Kode CSS

.port-gallery {
margin:20px auto;
color: #fff;
}
.port-gallery ul {
padding: 0 10px;
margin: 0;
margin-bottom: 10px;
float: left;
display: inline-block;
}
.port-gallery ul li {
display: inline-block;
cursor: pointer;
padding: 5px 10px
}
.port-gallery ul li.filtr-active {
background-color: #f27f2b;
cursor: default;
color: #fff
}.port-gallery ul.filterizr-sorting {
float: right;
}
.filtr-item {
width: 25%;
padding: 10px;
height: auto;
}
.filtr-item img {
border-radius: 3px;
width: 100%;
margin-bottom: 0;
height: 160px;
display:block;
}
.filtr-item p {
margin-bottom: 0
}
.filtr-item .desc {
display: block;
position: absolute;
bottom: 10px;
left: 10px;
right: 10px;
background-color: rgba(0, 0, 0, .7);
transition: ease .5s;
-moz-transition: ease .5s;
-webkit-transition: ease .5s;
color: #fff;
padding: 10px;
text-align: center;
}
.filtr-item .desc a {
color: #fff;
text-decoration: none;
cursor: pointer
}

Di sini saya mendefinisikan tinggi (height) setiap item lewat gambar yang ada di dalamnya, seperti yang saya highlight pada CSS di atas.

Silahkan modifikasi sendiri cssnya sesuai kebutuhan Anda.

Kode Javascript

$(document).ready(function() {

$(‘.filterizr-filter li’).click(function() {
$(‘.filterizr-filter li’).removeClass(‘filtr-active’);
$(this).addClass(‘filtr-active’);
});
$(‘.filterizr-sorting li’).click(function() {
$(‘.filterizr-sorting li’).removeClass(‘filtr-active’);
$(this).addClass(‘filtr-active’);
});
var filterizd = $(‘.filtr-container’).filterizr();

filterizd.filterizr(‘sort’, ‘title’, ‘asc’);

});

Seperti yang anda lihat, class .filtr-container dijadikan selector untuk meng-inisiasi filerizr.js dengan fungsi filterizr();. Sedangkan dibawahnya menambahkan fungsi sort untuk title yang harus berkorelasi pada atribut data-title pada div filtr-item.

Kode javascript di atasnya adalah kode untuk menambahkan highlight warna pada menu filter atau sorting yang dipilih dengan menambahkan class filtr-active.

Untuk Demo dan Downloadnya silahkan Anda lihat di codepen berikut ini.

See the Pen Filterable Gallery
Using Filterizr.js
by Syakir Rahman (@syakirurahman) on CodePen.


Anda juga bisa bereksperimen dengan merubah-ubah kode secara langsung pada pens tersebut. Jika ingin lebih bebas, anda juga bisa mendownload pens tersebut dengan link dibawah ini :

Itulah cara membuat Filterable Gallery menggunakan Filetrizr.js. Pada tutorial di atas saya hanya membuat galeri dengan fitur filter dan sorting yang sederhana. Jika ingin lebih kompleks silahkan kunjungi dan pelajari sendiri di web filterizr.js.

Bagaimana menurut anda ? Jangan lupa di share jika menurut anda bermanfaat 🙂

Terima kasih.

~Muhammad Syakirurohman~

Tinggalkan Balasan