Scribd Logo
Unggah

Selamat datang di Scribd!

  • Membuat Android Gallery Pada Ionic Framework Part 2

    Diunggah oleh

    it.sabang20
    6 tayangan3 halaman

    Judul Asli

    Membuat Android Gallery pada Ionic Framework part 2

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    DOCX, PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai DOCX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    6 tayangan3 halaman

    Membuat Android Gallery Pada Ionic Framework Part 2

    Diunggah oleh

    it.sabang20

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai DOCX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 3

    2.

    Menempatkan image pada folder img

    Pada langkah dua ini, kita akan meletakkan sebanyak 24 gambar dengan ukuran 200x120.
    Dalam kondisi default, hanya terdapat sebuah gambar ionic.png. Untuk itu tambahlah image
    dengan cara click folder app1->www->img, lalu tambahkan image seperti Gambar.3 dibawah
    ini :
    (Gambar.3)

    3. Mengedit file app.js

    Langkah ke-3 bertujuan untuk menyimpan gambar dari folder img ke dalam variabel img.
    Untuk itu editlah file app.js pada folder www/js/app.js sehingga codenya menjadi seperti
    berikut :

    angular.module('starter', ['ionic'])

    .run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {
    if(window.cordova && window.cordova.plugins.Keyboard) {

    cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

    cordova.plugins.Keyboard.disableScroll(true);
    }
    if(window.StatusBar) {
    StatusBar.styleDefault();
    }
    });
    })

    .controller("ExampleController", function($scope) {

    $scope.images = [];

    $scope.loadImages = function() {
    dir = "img/";
    for(var i = 1; i < 25; i++) {
    $scope.images.push({id: i, src: dir + i+".jpg"});
    }
    }

    });
    4. Mengedit file index.html

    Pada langkah ke-4 kita akan memanggil image dan menampilkannya dengan pola dalam satu
    baris akan dimuati image sebanyak 4 buah. Karena semua image berukuran sama, sehingga
    tampilan akan menjadi lebih rapi. Untuk itu editlah file index.html pada folder
    www/index.html sehingga code-nya menjadi seperti berikut:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-
    scalable=no, width=device-width">
    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">


    <link href="css/style.css" rel="stylesheet">
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <script src="cordova.js"></script>
    <script src="js/app.js"></script>

    </head>
    <body ng-app="starter">

    <ion-pane>
    <ion-header-bar align-title="center" class="bar-assertive">
    <img src="img/logo.png" width="20%">
    <h1 class="title">Gallery</h1>
    </ion-header-bar>
    <ion-content ng-controller="ExampleController" ng-init="loadImages()">
    <div class="row" ng-repeat="image in images" ng-if="$index % 4 === 0">
    <div class="col col-25" ng-if="$index < images.length">
    <img ng-src="{{images[$index].src}}" width="100%" />
    </div>
    <div class="col col-25" ng-if="$index + 1 < images.length">
    <img ng-src="{{images[$index + 1].src}}" width="100%" />
    </div>
    <div class="col col-25" ng-if="$index + 2 < images.length">
    <img ng-src="{{images[$index + 2].src}}" width="100%" />
    </div>
    <div class="col col-25" ng-if="$index + 3 < images.length">
    <img ng-src="{{images[$index + 3].src}}" width="100%" />
    </div>
    </div>
    </ion-content>
    <ion-footer-bar align-title="center" class="bar-assertive">
    <h1 class="title">Pusat Ilmu</h1>
    </ion-footer-bar>
    </ion-pane>
    </body>
    </html>
    Anda juga dapat membuat pola lain, misalnya ingin ditempati image sebanyak 5 buah dalam
    satu baris. Sehingga yang perlu ditambahkan adalah columnya (perhatikan ukuran columnya).

    Anda mungkin juga menyukai