Memanfaatkan Material Box Pada Framework Materialize
Selamat datang kembali di laman tips dan trik Source Code Aplikasi, kembali lagi dengan saya pada pembahasan bahan seputar dunia laman. Di kesempatan kali ini kita masih membahas mengenai framework css, yaitu framework css yang di kembangkan oleh google. Bagi teman – teman tak ada rugi nya mempelajari framework ini, karena memang framework satu ini pun amat menarik sekali bagi hasil layoutnya. Hingga di pembahasan kali ini saya akan memberikan tips mengenai Memanfaatkan Material Box Pada Framework Materialize, apa itu material box..??
Material box yaitu kata lain dari pop image, atau yang lazimnya kita gunakan plugin jQuery bagi membangun pop up gambar. Nah di pada framework ini kita tak perlu lagi tambahan plugin bagi membangun sebuah lightbox, karena di framework ini telah menyediakan lightbox/pop up gambar dan slider/slide show. Karenanya dari itu kita hanya perlu Memanfaatkan Material Box Pada Framework Materialize tanpa menggunakan plugin external. Bagus seketika saja kita implementasikan membangun lighbox nya, aturannya hampir sama seperti framework css bootstrap yaitu menggunakan class container dan row namun berbeda pada memberikan class col nya. Siapkan file materialize nya, teman – teman dapat unduh di laman resmi nya http://materializecss.com kemudian ketikkan script struktur html nya di bawah ini
Di gambar di atas ini saya membangun kolom sebanyak 4 dengan memberikan class col l3 yang artinya 12 : 3 = 4 kolom, kemudian saya memasukkan gambar di setiap kolom nya dan menambahkan class materialboxed.
Teman – teman masukkan gambar apa saja, di kasus ini saya menggunakan gambar dengan ukuran 800 x 400 px. Dan selanjut nya saya berikan width:100% supaya full di setiap kolom nya. Seandainya telah, saya save dan jalankan di browser nya karenanya dengan otomatis pop up image telah berhasil di bikin hanya dengan menambahkan class materialboxed di setiap tag image nya.
Seandainya di klik di diantara gambar karenanya pop up akan muncul
Berikut yaitu cara membangun pop up image dengan menggunakan framework materialize, teman – teman dapat pun di kembangkan lagi pengetahuannya bagi framework css. Supaya semakin banyak refrensi dan wawasannya mengenai membangun layout laman, bagus saya rasa demikian di artikel kali ini mengenai Memanfaatkan Material Box Pada Framework Materialize kita berjumpa kembali di artikel yang akan datang. Semoga bermanfaat, terimakasih dan hingga jumpa.
Sumber https://kursuswebsite.org
