Kotak Dialog dengan ColorBox

Repost dari artikel saya di PC Mild 04/2011

jQuery merupakan salah satu library javascript yang banyak digunakan saat ini. Karena kemudahan penggunaan dan kemampuannya yang powerful, serta modularity-nya yang mudah dikembangkan, banyak plugin diciptakan di atasnya. Salah satunya adalah plugin buatan Jack Moore yang dapat memudahkan pembuatan kotak dialog.

Dalam aplikasi web, kotak dialog memiliki banyak fungsi, antara lain adalah untuk menampilkan slideshow, perbesaran gambar, sampai dengan dialog konfirmasi. Pembuatan dari nol sebenarnya cukup mudah, seperti tutorial yang ada di PC Mild edisi 25/2010 lalu. Namun ada kalanya pemakaian plugin atau library yang telah jadi dapat mempersingkat waktu pembuatan. Salah satu plugin yang dapat digunakan adalah ColorBox.

Seperti halnya plugin yang lain, ColorBox menambah fungsionalitas dari jQuery dengan pembuatan kotak dialog. Beberapa alasan untuk memakai plugin ini antara lain adalah support untuk grouping, ukurannya yang kecil sehingga ringan (hanya 9KB), penampilan dapat diubah melalui css, terdapat mekanisme callback, support untuk berbagai macam browser, dan dapat dikustomisasi lebih lanjut dengan parameter.

Cara menggunakan plugin ini cukup mudah, ikuti saja langkah-langkah berikut ini.

  1. Download plugin versi terbaru di website resminya http://colorpowered.com/colorbox/. Anda juga bisa mengambilnya dari repository github yang tersedia (lebih disarankan, karena merupakan update terbaru). Saat artikel ini ditulis, versi terbaru adalah 1.3.15 yang telah support dengan jQuery 1.4. Jangan lupa untuk menyediakan juga jQuery yang dapat didownload di http://jquery.com.
  2. Buat sebuah halaman html sederhana, masukkan jQuery beserta ColorBox dalam head. Pastikan jQuery terletak di bagian atas, sebab ColorBox memerlukan pemanggilan fungsi-fungsi yang terdapat dalam jQuery. Bila diletakkan di bawah, beberapa browser tidak akan dapat membacanya. Untuk pembelajaran, Anda bisa menggunakan full version dengan komentar. Namun untuk situs live, disarankan menggunakan versi minified yang sudah dikompres menjadi 9KB.
    <!doctype html>
    <html>
      <head>
        <title>Test ColorBox</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="jquery-1.5.min.js"></script>
        <script type="text/javascript" src="jquery.colorbox-min.js"></script>
      </head>
      <body>
      </body>
    </html>
  3. Untuk sementara, Anda bisa memanfaatkan css dari contoh yang diberikan. Copy dan gunakan salah satu css yang Anda suka, contohnya dalam artikel ini adalah css yang digunakan di example1. Sertakan pula dalam head html Anda. Jangan lupa untuk menyertakan folder images dalam example1, karena itu akan digunakan dalam kotak dialog. Struktur file dapat Anda lihat pada gambar.
    .. kode lain
    <link rel="stylesheet" href="colorbox.css" />
    .. kode lain

  4. ColorBox memanfaatkan kemampuan selector dari jQuery. Fungsi dapat dipanggil melalui selector yang dideskripsikan. Sebagai langkah awal, tulislah kode sebagai berikut di dalam tag body.
      <body>
        <a id="test" href="">
          Test ColorBox
        </a>
      </body>
  5. Untuk memanggil, buatlah script pemanggilan di dalam tag head. Gunakan selector id dari kode yang telah dibuat di atas. Kemudian coba klik link yang telah tampil pada halaman web yang Anda buat. Maka hasilnya link tersebut tidak akan mengarah ke halaman lain, tetapi menampilkan kotak dialog kosong.
        <script type="text/javascript">
          $(document).ready(function() {
            $("#test").colorbox({initialHeight: "200px", initialWidth: "200px"})
          });
        </script>

  6. Untuk menampilkan isi ke dalam kotak dialog tersebut, ada beberapa macam cara. Cara pertama adalah dengan konten luar yaitu dengan membuat AJAX request terhadap URL yang telah ditulis pada atribut href. Perhatikan contoh berikut.
        <a id="test2" href="mascot.png">
          Test ColorBox 2
        </a>

    Contoh di atas akan memanggil konten berupa gambar dengan nama file mascot.png dari server. Jangan lupa untuk menyertakan script pemanggilan terhadap id ini. Bila link diklik, maka gambar akan ditampilkan dalam kotak dialog.

  7. Cara kedua adalah dengan konten inline, yaitu konten yang sebenarnya sudah ada dalam halaman, namun tidak ditampilkan. Buatlah kode html berikut untuk mencobanya.
        <a id="test3" href="">
          Test ColorBox 3
        </a>
        <div style="display: none;">
          <div id="content">
            <p>Ini adalah gambar mascot Mimi Creative</p>
            <img src="mascot.png" alt="Mascot" />
          </div>
        </div>

    Kemudian untuk pemanggilan pada javascript akan berbeda, karena memerlukan parameter inline seperti berikut.

            $("#test3").colorbox({inline: true, href: "#content"});
  8. Ada banyak parameter yang bisa digunakan untuk kustomisasi colorbox ini, antara lain:
    • transition – mengubah animasi transisi
    • speed – kecepatan transisi dalam millisecond
    • href – jika pada atribut elemen tidak disertakan, dapat menggunakan parameter
    • opacity – untuk tingkat transparansi dialog
    • width – lebar kotak dialog
    • height – tinggi kotak dialog
    • onOpen, onLoad, onComplete, onCleanup, onClosed – fungsi callback yang dipanggil pada event tersebut
  9. Colorbox juga menyediakan mekanisme callback, yaitu fungsi yang akan dipanggil setelah colorbox selesai ditampilkan, sama seperti callback parameter onComplete. Callback dapat diletakkan pada parameter kedua pemanggilan colorbox. Berikut ini contoh penggunaan callback sederhana.
            $("#test4").colorbox({inline: true, href: "#content"}, function() {
              // fungsi callback
              alert("Callback dipanggil!");
            });
  10. Mudah bukan? Anda bisa mempelajarinya lebih lanjut pada contoh-contoh yang disediakan dalam paket download. Ada 5 contoh yang bisa dipelajari dan dimodifikasi sesuka Anda. Selamat mencoba.

Download source code secara keseluruhanArtikel ini telah dipublikasikan di media cetak tabloid PC Mild edisi 04 tahun 2011 lalu.

4 Comments

Leave a Comment.