Halo selamat datang di website tips dan trik Dumet School, apa kabar semuanya..?? Berjumpa kembali dengan saya yang tidak ada bosannya share tips dan trik seputar dunia website, nah pada artikel kali ini saya akan memberikan tips dan trik tentang Membuat Tampilan Gallery Foto Dengan Plugin jQuery Mosaic yang mana artikel sebelumnya saya juga banyak sekali share tips dan trik macam – macam plugin jQuery. Dan kali ini kita juga akan membuat sebuah tampilan website untuk gallery foto dengan plugin Mosaic, dengan plugin Mosaic ini kita akan dimanjakan dengan hasil yang responsive yang artinya kita dapat menampilkan output gambar dengan ukuran yang berbeda. Kalian pernah dengar juga bukan tentang plugin mansory, Mosaic ini hampir sama dengan mansory namun penggunaannya lebih mudah saja. untuk output teman – teman bisa lihat pada gambar di bawah ini
Seperti yang teman – teman lihat pada screen shoot di atas ini, tampilan saya besarkan atau ciutkan hasilnya tetap saja respinsive. Semua ini di atur oleh plugin Mosaic, baik kita langsung saja praktekkan Membuat Tampilan Gallery Foto Dengan Plugin jQuery Mosaic. Disini saya menggunakan bootstrap, jika teman – teman ingin menggunakan css nativ tidak masalah yang terpenting adalah load plugin nya saja. Klik link ini untuk mendapatkan plugin Mosaic nya, kemudian extract dalam 1 folder file index yang akan kita buat. Kemudian kita panggil link plugin nya
Kemudian teman – teman siapkan foto nya dengan ukuran yang berbeda dan kita atur ukuran pada tag html nya juga berbeda – beda, lalu ketikkan script nya seperti di bawah ini
Langkah berikutnya tinggal kita aktifkan Mosaic nya dengan cara
<script> $('#myMosaic').Mosaic(); </script>
Jika sudah save dan jalankan pada browsernya, maka hasilnya seperti gambar di bawah ini
Kemudian kita perbanyak gambarnya dengan cara, copy saja foto yang sudah kita panggil atau teman – teman bisa menggunakan foto yang lainnya
Kemudian kita berikan border
Maka gallery foto sudah berhasil di buat secara respinsive dengan plugin mosaic
Bagimana, sangat mudah bukan..??
Sekian pada tips dan trik kali ini tentang Membuat Tampilan Galley Foto Dengan Plugin jQuery Mosaic semoga bisa menjadi refrensi untuk teman – teman yang sedang mencari plugin untuk gallery website nya. Kita berjumpa kembali di artikel yang akan datang, terimakasih dan sampai jumpa.
Semoga Bermanfaat
The post Membuat Tampilan Gallery Foto Dengan Plugin jQuery Mosaic appeared first on Kursus Website Terbaik.