Cara Membuat Popup Gambar dengan Materialize
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 di sebuah laman jual beli ya, mungkin dari teman-teman telah ada yang pernah membuatnya apalagi telah tersebar banyak plugin javascript yang menyediakan tampilan popup di gambar, oke lalu bagaimana cara merancang popup gambar dengan materialize, jangan kemana-mana simak terus ya teman-teman.
Jikalau kita biasanya bagi merancang popup gambar dengan bantuan javascript atau plugin semacamnnya tetapi seandainya di materialize kita dapat menggunakan hanya cssnya saja, seperti kita menggunakan bootstrap ya di sebuah class terdapat efek yang berbeda-beda, bagi cara merancang popup gambar dengan materialize, kita akan menggunakan yaitu class materialboxed, dimana class itu lah yang dapat menimbulkan gambar menjadi popup, tapi di materialize namanya bukan popup ya teman-teman tetapi media material box, teman-teman nannti dapat cari. oke saya harap disini pun teman-teman telah paham basic menggunakan materialize, jadi kita seketika masuk pada contoh pembuatannya, oke teman-teman perhatikan tema atau struktur berikut ini:
<!DOCTYPE html>
<html>
<head>
<title>cara merancang 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 laman 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 merancang popup gambar dengan materialize</h1>
<img class=materialboxed width=650 src=gambar/gambar1.jpg>
<h2>saya pun dapat memberikan caption bagi gambar di bawah ini</h2>
<img class=materialboxed data-caption=saya memberikan caption disini, tulis apa saja yang dibutuhkan bagi 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 merancang bagaimana seandainya kita memberikan caption pun ya teman-teman di gambar tersebut, dengan kita berikan data-caption kita berhasil memberika caption bagi gambar tersebut, dimana efek itu akan terlihat ketika kita mengklik sebuah gambar tersebut. bagaimana hasilnya kita lihat saya :
ini gambar seblum kita klik ya, kini kita coba klik gambar yang atas terlebih dahulu, gambar saya masih menggunakan gambar dari sana ya:
Dapat di lihat ya gambar menjadi besar kini kita lihat yang terdapat capitonnya :
terlihat tak teman-teman caption kecil yang terdapat di gambar ke tiga, jadi seperti demikianlah kita merancang popup gambar dengan gampang menggunakan materialize, jadi dengan class saja kita telah dapat menggunakan atau merancang popup gambar, amat menarik ya, dan saya rasa lumayan hingga disini dulu belajar kita mengenai cara merancang popup gambar dengan materialize, semoga bermnafaat dan samapi jumpa di artikel saya selanjutnnya terimakasih.
Sumber https://kursuswebsite.org
