Apa yang di maksud dengan gambar popup, gambar popup itu dimana ketika ada sebuah gambar dan gambar itu di klik akan menimbulkan efek menjadi besar, gambar yang rata-rata sebelumnya kecil menjadi besar, itu lah efek popup yang di maksud. gambar popup ini sering kita jumpai pada sebuah website jual beli ya, mungkin dari teman-teman sudah ada yang pernah membuatnya apalagi sudah tersebar banyak plugin javascript yang menyediakan tampilan popup pada gambar, oke lalu bagaimana cara membuat popup gambar dengan materialize, jangan kemana-mana simak terus ya teman-teman.
Jika kita biasanya untuk membuat popup gambar dengan bantuan javascript atau plugin semacamnnya tetapi jika di materialize kita bisa menggunakan hanya cssnya saja, seperti kita menggunakan bootstrap ya di sebuah class terdapat efek yang berbeda-beda, untuk cara membuat popup gambar dengan materialize, kita akan menggunakan yaitu class materialboxed, dimana class itu lah yang bisa menimbulkan gambar menjadi popup, tapi di materialize namanya bukan popup ya teman-teman tetapi media material box, teman-teman nannti bisa cari. oke saya harap disini juga teman-teman sudah mengerti dasar menggunakan materialize, jadi kita langsung masuk dalam contoh pembuatannya, oke teman-teman perhatikan template atau struktur berikut ini:
<!DOCTYPE html>
<html>
<head>
<title>cara membuat popup gambar dengan materialize</title>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<-e-style type="text/css">
.container{
width: 1000px;
margin: auto;
}
</style>
</head>
<body>
<div class="container">
<h1>cara membuat popup gambar dengan materialize</h1>
<img class="materialboxed" width="650" src="gambar/gambar1.jpg">
<h2>saya juga bisa memberikan caption untuk gambar di bawah ini</h2>
<img class="materialboxed" data-caption="saya memberikan caption disini, tulis apa saja yang dibutuhkan untuk caption gambar ini" width="250" src="https://lorempixel.com/800/400/nature/4">
<!--Import jQuery before materialize.js-->
<-e-script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<-e-script type="text/javascript" src="js/materialize.min.js"></script>
</div>
</body>
</html>
Disini saya membuat bagaimana jika kita memberikan caption juga ya teman-teman pada gambar tersebut, dengan kita berikan data-caption kita berhasil memberika caption untuk gambar tersebut, dimana efek itu akan terlihat ketika kita mengklik sebuah gambar tersebut. bagaimana hasilnya kita lihat saya :
ini gambar seblum kita klik ya, sekarang kita coba klik gambar yang atas terlebih dahulu, gambar saya masih menggunakan gambar dari sana ya:
Bisa di lihat ya gambar menjadi besar sekarang kita lihat yang ada capitonnya :
terlihat tidak teman-teman caption kecil yang terdapat pada gambar ke tiga, jadi seperti itulah kita membuat popup gambar dengan mudah menggunakan materialize, jadi dengan class saja kita sudah bisa menggunakan atau membuat popup gambar, sangat menarik ya, dan saya rasa cukup sampai disini dulu belajar kita tentang cara membuat popup gambar dengan materialize, semoga bermnafaat dan samapi jumpa pada artikel saya selanjutnnya terimakasih.