Cara Membuat Pop Up Gambar Dengan AngularJs Part2

Pada artikel sebelumnya tentang Cara Membuat Pop Up Gambar Dengan AngularJs Part1, kita sudah membuat struktur html yang berisi modal dengan menggunakan bootstrap 4. Dan pada artikel kali ini tentang Cara Membuat Pop Up Gambar Dengan AngularJs Part2 kita akan menyiapkan gambar-gambar yang nanti akan kita buat sebagai galery.

Untuk data gambarnya saya buat dengan format json dan gambar yang saya gunakan versi online semua ya teman-teman. Dan berikut ini adalah scriptnya.

var images = [
    {
       "src": "https://polka.id/wp-content/uploads/2017/08/pexels-photo-77797.jpeg",
        "caption":"Anjing Malas"
    },
     {
       "src": "https://www.dictio.id/uploads/db3342/original/3X/a/4/a4a56ecc02d521d7aa3418667aabc3856ccbcebd.jpg",
       "caption":"Ayam Kampung"
     }, 
     {
       "src": "https://ae01.alicdn.com/kf/HTB1XDr_KXXXXXanaXXXq6xXFXXX3/Kustom-kucing-kupu-kupu-anak-kucing-melompat-hewan-rumput-gaya-70-x-140-cm-mandi-handuk.jpg",
       "caption":"Kucing Lucu"
     },
     {
        "src": "https://www.ukmonline.co.id/wp-content/uploads/cache/images/2018/10/5a83b41805aebca0efc1352bfadba9d7_cara-budidaya-hamster2/5a83b41805aebca0efc1352bfadba9d7_cara-budidaya-hamster2-186372551.jpg",
       "caption":"Hamster Lucu"
     },
     {
        "src": "https://sc01.alicdn.com/kf/HTB1.z2ld3vD8KJjy0Flq6ygBFXa3/200458010/HTB1.z2ld3vD8KJjy0Flq6ygBFXa3.jpg",
       "caption":"Kuda Berlari"
     }
   ];

Jika dilihat dari variable images di atas ada dua key yang saya sediakan, key pertama adalah src atau alamat gambarnya dan kedua adalah caption untuk gambarnya.

Langkah terakhir Cara Membuat Pop Up Gambar Dengan AngularJs Part2 yaitu kita akan membuat sebuah controller untuk kita gunakan membuat fungsi pop up gambarnya seperti script berikut ini.

angular.module('myApp', [])
  .controller('myController', function() {
  this.showCaption = true;
  this.images = images;
  this.current = 0;
  
  this.getIndex = function(img) {
    this.current = this.images.indexOf(img);
    
  }
});

Didalam controller ada beberapa variable yang saya buat. Dimana saya menggunakan this yang berarti mengacu kepada controllernya. Variable showCaption saya buat untuk menampilkan caption gambarnya. Variable images saya buat untuk menampung data json images yang tadi dibuat. Dan current untuk index dari gambarnya. Karena untuk menampilkan gambar ukuran besar di modal ambil berdasarkan index.

Jika sudah selesai maka controller bisa kita jalankan dengan memberikan ng-controller di body dengan nama aliasnya ctrl.

<body ng-app="myApp" ng-controller ="myController as ctrl">

Pada bagian gallery kita cetak dan looping gambarnya dengan ng-repeat seperti di bawah ini.

<div class="col-md-2" ng-repeat="image in ctrl.images">

Untuk src nya saya gunakan ng-src pada tag img yang berisi image disambung dengan keynya.

<img class="img-fluid" ng-src="{{image.src}}" alt="invalid image url">

Dan untuk menjalankan fungsi getIndexnya saya berikan di tag a dengan parameter image.

<a class="thumbnail" href="" ng-click="ctrl.getIndex(image)">

Dan pada bagian modal header kita langsung bisa mencetak caption berdasarkan gambar yang kita klik melalui index seperti berikut ini.

<h5 class="modal-title" id="exampleModalLabel">{{ctrl.images[ctrl.current].caption}}</h5>

Dan pada modal body kita cetak gambar sesuai src yang kita klik.

<img class="img-fluid" ng-src="{{ctrl.images[ctrl.current].src}}">

Jika sudah selesai maka akan tampil seperti pada gambar berikut ini.

Demikian Cara Membuat Pop Up Gambar Dengan AngularJs Part2. Semoga dapat bermanfaat dan selamat mencoba.

Cara Membuat Pop Up Gambar Dengan AngularJs Part2

Kategori