salah satu plugin berbasis jQuery yang dapat menampilkan pop up box yang cantik, untuk demo dari colorbox ini bisa dilihat di halaman ini. Setelah asik bermain – main dengan colorbox dan juga menikmati keindahan colorbox beberapa lama, mulai muncul pertanyaan lain dalam pikiran saya yaitu jika saya memasukan perintah javascript di dalam colorbox ini apakah bisa jalan secara normal atau tidak ya?
Setelah beberapa kali percobaan ternyata memang jika ingin melakukan manipulasi javascript di dalam colorbox tidak bisa langsung dengan menulis javascript di dalamnya (ini yang penulis alami, mungkin ada diantara pembaca yang mengalami hal lain silahkan berbagi di comment). Hal ini di sebabkan karena saya mencoba mengakses elemen yang belum di load ke dalam dokumen sehingga akan menyebabkan error pada javascriptnya atau tidak akan berjalan sama sekali.
Jika kita membaca lebih jauh tentang dokumentasi di colorbox, maka anda bisa lihat sebuah option dari colorbox untuk memuat fungsi callback yang ingin anda masukan dalam colorbox. Fungsi – fungsi callback itu diantaranya adalah :

• onOpen : callback yang di eksekusi tepat sebelum colorbox terbuka.
• onLoad : callback yang di eksekusi tepat sebelum colorbox mencoba untuk membukan target dokumen.
• onComplete : callback yang di eksekusi setelah semua kontent di tampilkan.
• onCleanup : callback yang di eksekusi pertama kali saat proses menutup colorbox.
• onClosed : callback yang di eksekusi setelah colorbox tertutup.

Dalam penggunaan callback ini sangat mudah, sama seperti penggunaan callback pada jQuery, seperti contoh ini :

<script type="text/javascript">
$('a.colorbox').colorbox({
     onComplete:function(){
          $('#date').datepicker({
               changeMonth: true,
               changeYear: true,
               showButtonPanel: true,
               isRTL: true
          });
     }});
});
</script>

Script diatas melakukan panggila ke plugin jQuery lainnya yaitu datepicker dari jQuery UI sehingga di halaman pop up colorbox akan tampil format input datepicker dari jQuery UI. Jika anda ingin memisahkan callback ke dalam fungsi juga bisa di lakukan dengan cara berikut :

<script type="text/javascript">
$('a.colorbox').colorbox({
     onComplete: myFunctionName
});

function myFunctionName() {
     alert('This is my alert text.');
}
</script>

Masih banyak trik lain yang bisa anda terapkan dengan fungsi callback ini, silahkan berkretifitas