Pop Up gambar adalah suatu animasi pada tampilan website dimana ketika kita melakukan klik salah satu gambar kecil yang ada di halaman website maka akan tampil gambar dengan ukuran besar yang berada di tengah danpaling atas halaman website. Dan pada kesempatan kali ini akan saya membahaspada artikel tentang Cara Membuat Pop Up Gambar Dengan AngularJs Part1.

Untuk Cara Membuat Pop Up Gambar Dengan AngularJs Part1 kita membutuhkan suatu modal untuk tampilan gambar besarnya. Dan kali ini sayamenggunakan modal dari bootstrap 4. Teman-teman bisa langsung kunjungi halaman getbootstrap.com lalu cari modal seperti pada gambar di bawah ini.

Cara Membuat Pop Up Gambar Dengan AngularJs Part1

Jika sudah maka teman-teman bisa edit untuk bagian tertentunya. Karena disini saya tidak menggunakan tombol maka saya akan hapus tombolnya menjadi kumpulan gambar. Kemudian pada bagian modal yaitu tempat untuk menampilkan gambar dengan ukuran besar saya juga hapus tombol di bagian bawah yaitu close dan save dan paragraph di dalam body modal saya ganti menjadi gambar. Berikut ini adalah struktur html  dengan bootstrap yang sudah saya edit.

Didalam struktur htmlnya saya sudah memberikan direktif angularjs yang di perlukan dan juga mencetak data menggunakan expression kurung kurawel dua kali. Saya akan jelaskan lebih detail saat membuat script angularjsnya agar bisa lebih paham.

Jika sudah selesai maka kita akan menyiapkan gambar gambar yang akan ditampilkan dan membuat fungsi pop up gambarnya pada pembahasan selanjutnya tentang Cara Membuat Pop Up Gambar Dengan AngularJs Part2.

Demikian artikel tentang Cara Membuat Pop Up Gambar Dengan AngularJs Part1. Semoga bermanfaat.