Intel XDK : Membuat Image Gallery

Image gallery adalah kumpulan gambar/foto yang akan ditampilkan di aplikasi. Pada Intel XDK, ask untuk menambahkan image gallery dapat menggunakan widget Image Gallery pada Tab Common.

Tombol control image gallery

Untuk menambahkan Image Gallery pada page, tadalafil drag and drop-lah widget tersebut pada page. Maka Image Gallery akan tampil dengan deretan gambar default dari Intel.

Tampilan image gallery pada page

Untuk mengubah gambar tersebut menjadi gambar kita, maka bukalah folder gallery_images dan copy-kan file gambar yang akan ditampilkan pada gallery, seperti tampak pada gambar berikut:

Selanjutnya, masih dalam folder gallery_images bukalah file gallery_images.json pada Notepad++ dan edit-lah nama file gambar yang ada pada dokumen tersebut dengan nama file gambar baru yang telah di-copy.

Isi file dokumen gallery_images.json sebelum diedit

Isi file dokumen gallery_images.json setelah diedit

Jika diperlukan untuk menambahkan gambar lain, copy paste-lah script-nya dan edit-lah nama file gambar sesuai dengan yang diinginkan.

Selanjutnya Refresh kembali page pada project Intel XDK dimana image gallery tersebut ditambahkan.

Tampilan image gallery yang telah diedit gambarnya

Tampilan image gallery pada simulator

Mudah bukan? 😉

Note:

Tulisan ini hanya sebagai dokumentasi pribadi saja, untuk memudahkan siswa saya mengerjakan projectnya. Maaf jika saya tidak mengulas secara detail langkah-langkahnya, karena saya menganggap siswa saya sudah bisa..hehe.. Anyway, makasih sudah meluangkan waktu menyimak postingan ini.. 🙂

Referensi:

http://hodentekmobile.blogspot.co.id/2016/09/intel-xdk-controls-10-image-gallery.html