Selamat datang kembali di website tips dan trik Dumet School, kembali lagi dengan saya dalam pembahasan materi seputar dunia website. Pada kesempatan kali ini kita masih membahas tentang framework css, yaitu framework css yang di kembangkan oleh google. Untuk teman – teman tidak ada rugi nya mempelajari framework ini, karena memang framework satu ini juga sangat menarik sekali untuk hasil layoutnya. Sampai pada pembahasan kali ini saya akan memberikan tips tentang Memanfaatkan Material Box Pada Framework Materialize, apa itu material box..??
Material box adalah kata lain dari pop image, atau yang biasa kita gunakan plugin jQuery untuk membuat pop up gambar. Nah di dalam framework ini kita tidak perlu lagi tambahan plugin untuk membuat sebuah lightbox, karena di framework ini sudah menyediakan lightbox/pop up gambar dan slider/slide show. Maka dari itu kita hanya perlu Memanfaatkan Material Box Pada Framework Materialize tanpa menggunakan plugin external. Baik langsung saja kita implementasikan membuat lighbox nya, aturannya hampir sama seperti framework css bootstrap yaitu menggunakan class container dan row namun berbeda dalam memberikan class col nya. Siapkan file materialize nya, teman – teman bisa download di website resmi nya http://materializecss.com kemudian ketikkan script struktur html nya di bawah ini
Pada gambar di atas ini saya membuat kolom sebanyak 4 dengan memberikan class col l3 yang artinya 12 : 3 = 4 kolom, kemudian saya memasukkan gambar pada setiap kolom nya dan menambahkan class materialboxed.
Teman – teman masukkan gambar apa saja, pada kasus ini saya menggunakan gambar dengan ukuran 800 x 400 px. Dan selanjut nya saya berikan width:100% supaya full pada setiap kolom nya. Jika sudah, saya save dan jalankan pada browser nya maka dengan otomatis pop up image sudah berhasil di buat hanya dengan menambahkan class materialboxed pada setiap tag image nya.
Jika di klik pada salah satu gambar maka pop up akan muncul
Berikut adalah cara membuat pop up image dengan menggunakan framework materialize, teman – teman bisa juga di kembangkan lagi pengetahuannya untuk framework css. Supaya semakin banyak refrensi dan wawasannya tentang membuat layout website, baik saya rasa sekian pada artikel kali ini tentang Memanfaatkan Material Box Pada Framework Materialize kita berjumpa kembali pada artikel yang akan datang. Semoga bermanfaat, terimakasih dan sampai jumpa.