Press "Enter" to skip to content

jQuery Mobile (09): Menampilkan Gambar dalam Bentuk Popup LightBox

Selamat berjumpa lagi bersama BangHaji DotCom 😀 . Lama sekali baru muncul lagi, pengunjung bahkan sudah hampir lupa 😉 , mohon maaf ya, saya lagi banyak yang dikerjakan, semoga selanjutnya bisa rutin menulis kembali.

Baiklah, kita akan bahas lagi tentang jQuery Mobile setelah tulisan saya yang terakhir pada September tahun lalu tentang membuat toolbar 🙁 . Sekarang kita akan buat semacam penampil gambar dalam bentuk popup, kita sebut saja dengan Photo LightBox.

Konsepnya sederhana, kita pasti sering menemukan gambar di halaman web dalam ukuran kecil, kemudian jika di-klik akan menampilkan gambar dalam ukuran besar, iya kan? Nah kita juga akan coba buat seperti demikian. Langsung saja, silakan ketik kode berikut ini ya, simpan di folder kerja dengan nama jqm_photolightbox.html. Sebelumnya, jangan lupa untuk memasukkan sebuah gambar di folder kerja, kemudian untuk kode nama gambarnya silakan disesuaikan sendiri. Kalau sudah lupa, bisa lihat lagi pengantar aplikasi Web Mobile.

<html>
<head>
   <title>Membuat Photo LightBox</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

   <link rel="stylesheet" href="jquery.mobile-1.4.5.min.css" />
   <script src="jquery-1.11.1.min.js"></script>
   <script src="jquery.mobile-1.4.5.min.js"></script>
</head>

<body>
<div data-role="page" id="page1">
   <header data-role="header">
      <h1>Photo LightBox</h1>
   </header>
 
   <div data-role="content">
      <p>Anggap saja gambar di bawah adalah sebuah thumbnail. Jika gambar itu di-klik akan terbuka sebuah jendela yang menampilkan gambar asli dalam ukuran yang lebih besar.</p>
      <p>
         <a href="#bukafoto" data-rel="popup" data-position-to="window" data-transition="fade">
            <img src="banghaji_128.png" alt="BangHaji DotCom" width="75">
         </a>
      </p>
   </div>

   <footer data-role="footer" data-position="fixed">
      <h2>BangHaji DotCom</h2>
   </footer>
</div>
</body>
</html>

Perhatikan dulu kode di atas, itu belum selesai. Untuk kerangkanya tetap sama seperti biasa, hanya saja pada link yang akan digunakan untuk menampilkan gambar perlu ditambahkan data-rel="popup" agar tampil dalam bentuk popup dan juga ditambahkan data-position-to="window" sehingga tampilannya dalam bentuk window. Untuk yang data-transition="fade" boleh dipakai boleh juga tidak. Penting diperhatikan adalah tujuan dari link mengarah pada id dengan nama #bukafoto dan id ini nanti harus ada agar gambar bisa ditampilkan dalam bentuk popup.

Baiklah, kode diatas jika dilihat sudah bisa menampilkan gambar kecil tetapi jika gambarnya di-klik masih belum menampilkan Photo LightBox-nya 😉 . Lanjutkan dengan mengetik kode berikut, masih di file yang sama, letakkan di dalam content, tepatnya sebelum footer.

<div data-role="popup" id="bukafoto">
   <img src="banghaji_128.png" alt="BangHaji DotCom" width="300">
</div>

Perhatikan di sana ada id="bukafoto", jangan salah. Nah sekarang silakan dicoba jalankan dan klik gambar kecilnya, akan ditampilkan kira-kira seperti gambar berikut ini.

jQuery Mobile Photo LightBox Without Button

Sudah cukup? belum ya. Kita coba tambahkan tombol untuk menutup jendela gambarnya. Kita tambahkan ikon close, walaupun sebenarnya jendela tetap akan menutup jika di-klik di luar gambar 😀 . Caranya gimana? Ya kita tambahkan sebuah link berbentuk button. Saya sarankan untuk latihan yang kedua ini dipisahkan dari yang pertama supaya kelihatan perbedaannya, yang pertama tanpa tombol close dan yang kedua ada tombolnya.

Lakukan save-as dulu dari file tadi menjadi jqm_photolightbox_button.html. Tambahkan kode berikut ini di bagian penampil gambar, lengkapnya bagian penampil gambar menjadi seperti ini.

<div data-role="popup" id="bukafoto">
   <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-icon-delete ui-btn-a ui-btn-right ui-btn-icon-notext">tutup</a>
   <img src="banghaji_128.png" alt="BangHaji DotCom" width="300">
</div>

Sekarang jalankan file baru ini, bukan yang tadi. Klik gambar kecil dan akan ditampilkan gambar besar dengan tombol close berupa ikon di kanan atas. Tombol itu muncul karena ada definisi css di bagian class.

jQuery Mobile Photo LightBox With Button

Saya jelaskan sedikit isi dari class yang ada di-link tersebut. Class ui-btn menjadikan link berupa button, lalu ada ui-corner-all akan menjadikan sudut-sudut tombol berbentuk bulat/lengkung, lagi, ui-icon-delete untuk menampilkan ikonnya (ikon tanda silang), selanjutnya ui-btn-right saya yakin sudah bisa ditebak untuk apa 😉 dan ada juga ui-btn-icon-notext untuk menyembunyikan teks “tutup”.

Bagaimana jika beberapa class itu dihapus, apa jadinya? Silakan dicoba saja sendiri ya 😀

Cukup dulu ya, lihat tutorial lainnya di Seri Belajar jQuery Mobile. Sampai jumpa lagi…

jika tulisan ini bermanfaat, mari sebar dan bagikan

Be First to Comment

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *