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.

1 2