hallo bali lagi ditutorial pemrograman Dumet School kali ini kita akan membahas seputar web design yah teman teman, jika teman senang dengan sebuah karya yang unik dan menarik untuk dijadikan portfolio, pasti karya yang memukau dan dapat memanjakan mata si penglihat akan terlihat menakjubkan yah pasti user akan betah berlama lama di website kita sehingga bisa menaikan trafik kita sendiri, oke jika teman teman sudah pernah melihat sebuah kolom atau daftar sebuah bagian portfolio untuk website
tentang portfolio maka akan menampilkan sekumpulan gambar dan terdapat sebuah pilihan menu ingin ditampikan gambar berdasarkan apa? kira kira seperti itu yah, nah pasti menarik sekali yah untuk kita bahas, tentu teman teman akan menggunakan bantuan sebuah plugin untuk dapat cepat dalam menyelesaikannya baiklah plugin yang kita gunakan kali ini ialah plugin dari mixitup disana terdapat banyak sekali yang tentang sorting data tertentu, baiklah coba teman teman buatkan sebuah file baru bernama index.html lalu tambahkan baris kode sebagai berikut :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/reset.css" rel="stylesheet"/>
<link href="css/style.css" rel="stylesheet"/>
<title>Sorting Using jQuery</title>
<style>
button { padding-right: 30px; color: #fff; cursor: pointer; font-size: 25px; font-variant: small-caps; }
</style>
</head>
<body>
<div class="controls">
<button type="submit" data-filter="all">ALL </button>
<button type="submit" data-filter=".spiderman">spiderman </button>
<button type="submit" data-filter=".vintage">vintage </button>
<button type="submit" data-filter=".deadpool">deadpool </button>
<button type="submit" data-filter="none">None </button>
</div>
<div class="container" data-ref="mixitup-container">
<div class="item spiderman" data-ref="mixitup-target">
<img src="images/images2.jpg" width="100%" height="200px">
</div>
<div class="item spiderman" data-ref="mixitup-target">
<img src="images/spiderman-3.jpg" width="100%" height="200px">
</div>
<div class="item vintage" data-ref="mixitup-target">
<img src="images/hd-photography-wallpapers.jpg" width="100%" height="200px">
</div>
<div class="item vintage" data-ref="mixitup-target">
<img src="images/thumb-1920-345366.jpg" width="100%" height="200px">
</div>
<div class="item deadpool" data-ref="mixitup-target">
<img src="images/12197.jpg" width="100%" height="200px">
</div>
<div class="item spiderman" data-ref="mixitup-target">
<img src="images/spiderman-3.jpg" width="100%" height="200px">
</div>
<div class="item vintage" data-ref="mixitup-target">
<img src="images/hd-photography-wallpapers.jpg" width="100%" height="200px">
</div>
<div class="item deadpool" data-ref="mixitup-target">
<img src="images/DeadpoolFAcebookWallpaper(MarvelSpoilerOficial).png" width="100%" height="200px">
</div>
<div class="item vintage" data-ref="mixitup-target">
<img src="images/thumb-1920-345366.jpg" width="100%" height="200px">
</div>
<div class="gap"></div>
<div class="gap"></div>
<div class="gap"></div>
</div>
<script src="js/mixitup.min.js"></script>
<script>
var containerEl = document.querySelector('[data-ref~="mixitup-container"]');
var mixer = mixitup(containerEl, {
selectors: {
target: '[data-ref~="mixitup-target"]'
}
});
</script>
</body>
</html>
untuk file file css dan js nya nanti saya akan lampirkan di link bawah ini yah :
oke disave dan jalankan jika berhasil maka ketika teman teman memilih salah satu menu misalkan spiderman maka gambar semua spiderman akan ditampilkan, cukup mudah bukan, sekian tutorial tentang Bagaimana Cara Membuat Sorting Data Image Menggunakan Plugin Mixitup. Sampai bertemu diartikel selanjutnya dan sampai jumpa .
#KeepLearn
#IsmetMA