Membuat Tampilan Gallery Foto Dengan Plugin jQuery Mosaic

Halo selamat datang di blog tips dan trik Source Code Aplikasi, apa kabar semuanya..?? Berjumpa kembali dengan saya yang tak ada bosannya share tips dan trik seputar dunia blog, nah di artikel kali ini saya akan memberikan tips dan trik mengenai Membuat Tampilan Gallery Foto Dengan Plugin jQuery Mosaic yang mana artikel sebelumnya saya pun banyak sekali share tips dan trik macam – macam plugin jQuery. Dan kali ini kita pun akan membangun sebuah tampilan blog bagi gallery gambar dengan plugin Mosaic, dengan plugin Mosaic ini kita akan dimanjakan dengan hasil yang memiliki tampilan yang dinamis yang artinya kita dapat menampilkan output gambar dengan ukuran yang berbeda. Kalian pernah dengar pun bukan mengenai plugin mansory, Mosaic ini hampir sama dengan mansory namun penggunaannya lebih gampang saja. bagi output teman – teman dapat lihat di gambar di bawah ini



Halo



Halo



Halo



Seperti yang teman – teman lihat di screen shoot di atas ini, tampilan saya besarkan atau ciutkan hasilnya tetap saja respinsive. Seluruh ini di atur oleh plugin Mosaic, bagus kita seketika saja praktekkan Membuat Tampilan Gallery Foto Dengan Plugin jQuery Mosaic. Disini saya menggunakan bootstrap, apabila teman – teman ingin menggunakan css nativ tak masalah yang terpenting ialah load plugin nya saja. Klik link ini bagi memperoleh plugin Mosaic nya, kemudian extract pada 1 folder file index yang akan kita bikin. Kemudian kita panggil link plugin nya



Halo



Kemudian teman – teman siapkan gambar nya dengan ukuran yang berbeda dan kita atur ukuran di tag html nya pun berbeda – beda, lalu ketikkan script nya seperti di bawah ini



Halo



Langkah berikutnya tinggal kita aktifkan Mosaic nya dengan cara



<script> $('#myMosaic').Mosaic(); </script>


Bila telah save dan jalankan di browsernya, karenanya hasilnya seperti gambar di bawah ini



Halo



Kemudian kita perbanyak gambarnya dengan cara, copy saja gambar yang telah kita panggil atau teman – teman dapat menggunakan gambar yang lainnya



Halo



Kemudian kita berikan border



Halo



Karenanya gallery gambar telah berhasil di bikin secara respinsive dengan plugin mosaic



Halo



Bagimana, betul-betul gampang bukan..??



Demikianlah di tips dan trik kali ini mengenai Membuat Tampilan Galley Foto Dengan Plugin jQuery Mosaic semoga dapat menjadi refrensi bagi teman – teman yang sedang mencari plugin bagi gallery blog nya. Kita berjumpa kembali di artikel yang akan datang, terimakasih dan hingga jumpa.



Semoga Bermanfaat 🙂




Sumber https://kursuswebsite.org

Popular posts from this blog

Perbedaan Antara Keyup dan Keydown Pada jQuery

Membuat Table Warna Berselang dengan PHP