buat Lightbox mu sendiri dengan jquery

(1)

buat Lightbox mu sendiri dengan jQuery

Oleh: putra surya herlambang

assalamualikum wr wb. apakah kamu pernah melihat gambar pada website

yang ketika kamu klik lalu akan muncul suatu kotak besar yang juga

memperbesar gambar tersebut? yups. itu adalah lightbox, sebuah fitur

website yang sangat sering dipakai di aplikasi website di seluruh dunia ini.

sudah banyak sekali plugin-plug...

assalamualikum wr wb.

apakah kamu pernah melihat gambar pada website yang ketika kamu klik lalu akan muncul suatu kotak besar yang juga memperbesar gambar tersebut? yups. itu adalah lightbox, sebuah fitur website yang sangat sering dipakai di aplikasi website di seluruh dunia ini.

sudah banyak sekali plugin-plugin jquery tentang lightbox yang siap pakai, jadi kita ga perlu repot-repot membaut plugin tersebut, hanya saja, terkadang ada client yang minta lightbox dengan fitur berbeda sehingga kita bersusah payah untuk membuat lightbox tersebut dengan cara sendiri. untuk yang belum tahu tentang cara membaut plugin jquery, silahkan kamu coba cari di website ini tentang tutorial "membuat plugin jquery" karena pada tutorial ini kita akan langsung ngoding lightbox tersebut dengan membuat pluginnya sekaligus.

apa saja skill yang kita butuhkan untuk membuat lightbox ini? 1. html

2. css 3. js 4. jquery

berikut adalah tahap-tahap dalam pembuatan lightbox - css file untuk style lightbox nya

- html file untuk testing lightbox nya - js file untuk scripting jquery pluginnya - jquery.

NOTE: pada tulisan yang berupa code/script, yang berhuruf tebal adalah code/script yang telah di ubah

(2)

1. Step pertama

kita buat satu file html bernama demo.html <!DOCTYPE html>

<body>

<h1>test html untuk memastikan class lightbox tidak bermasalah</h1>

<span style='color:#fff'>aku anak dari element lightbox</span>

</div>

</body> </html>

2. step kedua

kita buat file lightbox.css nya. /*

class .lightboxgue ini yang akan jadi element utama, semua elemen

yang berurusan dengan plugin lightboxgue akan ada di dalam element ini. */

.lightboxgue {

position: fixed; // agar posisi nya mengikuti browser

background: #000; // background berwarna hitam untuk yang tidak support rgba

background: rgba(0,0,0,0.5); // jika browser support rgba maka backgroundnya akan berwarna hitam dengan tampilan yang tembus pandang (opacity)

width: 100%; // lebar akan menjadi 100% dari ukuran browser

height: 100%; // tinggi nya pun juga akan menjadi 100% dari ukuran browser

top: 0; // memaksa element untuk berada pada posisi diatas, left: 0; // memaksa element untuk berada pada posisi paling kiri

(3)

z-index: 100000; // opsi ini dibutuhkan agar posisi element lightbox berada pada tingkat paling atas

}

nah, sekarang coba refresh browser kamu... pada file html ada element span, untuk apa itu? itu hanya untuk test element lightbox saja, nanti itu akan kita hapus.

3. step ketiga

sekarang kita coba edit kembali file demo.html dan menambahkan element-element yang nantinya akan dibutuhkan lightbox

<!DOCTYPE html> <html lang='en'> <head>

<body>

<h1>test html untuk memastikan class lightbox tidak bermasalah</h1> <div class='lightboxgue'>

<div class='lightboxgue-container'>

<div class='lightboxgue-showup'> <img src='something.jpg' /> </div>

<div class='lightboxgue-panel'> <span class='close'>x</span> </div>  </div>  </div> 

<h1>test html untuk memastikan class lightbox tidak bermasalah</h1> </body>

(4)

4. step ke empat

sekarang kita tambah kan style baru pada file css lightboxgue.css. /*

.lightboxgue {

position: fixed; /* agar posisi nya mengikuti browser */

background: #000; /* background berwarna hitam untuk yang tidak support rgba */

background: rgba(0,0,0,0.5); /* jika browser support rgba maka backgroundnya akan berwarna hitam dengan tampilan yang tembus pandang (opacity) */

width: 100%; /* lebar akan menjadi 100% dari ukuran browser */ height: 100%; /* tinggi nya pun juga akan menjadi 100% dari ukuran browser */

top: 0; /* memaksa element untuk berada pada posisi diatas, */ left: 0; /* memaksa element untuk berada pada posisi paling kiri */ z-index: 100000; /* opsi ini dibutuhkan agar posisi element lightbox berada pada tingkat paling atas */

}

/*

.lightboxgue-container akan kita gunakan sebagai penampil data pada lightbox

lebar dan tinggi pada element ini akan kita atur pada file javascript nya.

begitu juga pada posisi dari element ini. */

.lightboxgue-container {

position: relative; /* kitab buat relative agar element

.lightboxgue-panel bisa keluar dari element dengan posisi absolute */ width: 50%; /* lebar ini hanya untuk menahan posisi yang absolute, nanti akan kita ubah lebarnya dengan javascript */

}

.lightboxgue-showup {

/* karena element ini ada di dalam .lightboxgue-container maka biarkan element ini mengikuti setiap perubahan bentuk pada

.lightboxgue-container */ width: 100%;

height: 100%; }

.lightboxgue-showup img{ width: 100%; } /* kita ubah ke 100% agar mengikuti lebar dari .lightboxgue-container */

(5)

.lightboxgue-panel {

/* posisi absolute akan memungkinkan kita mengatur letak posisi secara bebas,

namun itu juga tergantung pada parent elementnya, itu alasannya kenapa kita mengatur .lightboxgue-container menjadi relative position. */

position: absolute; color: #fff;

top: 0;

right: -20px; /* opsi ini kita buat agar posisinya berada di luar element parent */

}

.lightboxgue-panel span.close{ color:red; cursor:pointer; } /* style untuk tombol close nya */

5. step ke lima

okay, sekarang tampilan lightbox sudah kita buat, sekarang saatnya kita membuat file plugin jquery nya!

buat file javascript bernama jquery.lightboxgue.js. /**

* tutorial membuat lightbox di website jagocoding.com * author: putra surya herlambang

*/

( function($) {

$.fn.lightboxgue = function() { var elm = this;

/**

tutorial ini hanya untuk lightbox pada gambar jadi wajib bagi kita untuk mengecek kembali apakah itu element gambar atau bukan?

*/

if( elm.is('img') ) {

// copy semua html .lightboxgue kedalam variable ini

var $lightboxgue = $("<div

class='lightboxgue'><div class='lightboxgue-container'> <div class='lightboxgue-showup'><img src='something.jpg' /></div><div class='lightboxgue-panel'><span class='close'>X</span></div> </div> </div>");

(6)

apakah elemen ini sudah kita

// masukkan ke dalam element body? var apakah_lightboxgue_sudah_eksis = $("body").find(".lightboxgue").length;

if( apakah_lightboxgue_sudah_eksis != true ) { // ohh, jadi belum ada ya, okay, kalo gitu $lightboxgue akan kita masukkan ke

// dalam element body

$("body").append($lightboxgue); }

// sekarang kita akan buat event klik pada gambar yang sudah kita pilih

$(elm).click( function(e) {

alert('yesss, gambarnya bisa diklik.'); });

} // end of logical is it image?

return this; // mengembalikan element nya agar rantai framework tidak terputus

}; }) (jQuery);

6. step ke enam

nah, karena di file js kita mencoba untuk menanamkan element lightboxgue via javascript, jadi element lightbox yang ada di html kita hapus, dan ada beberapa element yang saya tambahkan. dan juga sedikit edit file css lightboxgue.

<!DOCTYPE html> <html lang='en'> <head>

<script type='text/javascript' src='jquery.min.js'></script> <script type='text/javascript'

src='jquery.lightboxgue.js'></script>

</head> <body>

(7)

<img src='something.jpg' width='200' />

</body> </html>

<script type='text/javascript'>

$("img").lightboxgue(); // ayo kita test pluginnya. </script>

nah, sekarang coba deh di klik gambarnya, muncul alert ga? kalo muncul berarti berhasil. sekarang kita edit file css lightboxgue.css nya agar element lightboxgue tidak langsung muncul

/*

.lightboxgue {

top: 0; /* memaksa element untuk berada pada posisi diatas, */ left: 0; /* memaksa element untuk berada pada posisi paling kiri */

z-index: 100000; /* opsi ini dibutuhkan agar posisi element lightbox berada pada tingkat paling atas */

display: none; /* kita hilangkan elementnya agar ga langsung

muncul */

}

// ... dll.

7. step ke tujuh

sekarang kita lanjut ke file jquery.lightboxgue.js disini kita akan melanjutkan "sesuatu" pada event klik yang barusan kita buat.

/**

(8)

*/

( function($) {

/**

*/

// copy semua html untuk element .lightboxgue kedalam variable ini

// untuk pertama kalinya kita haru memeriksa, apakah elemen ini sudah kita

$("body").append($lightboxgue);

// fungsi untuk mengaktifkan event click

pada kejadian menutup lightbox

$("body .lightboxgue span.close").click( function() {

$("body .lightboxgue").fadeOut(); });

} // end of logical lightbox yang sudah eksis

// yang sekarang akan kita lakukan pada

gambar ini adalah

// mendownload data gambar terlebih dahulu agar kita bisa mengetahui

(9)

gambar tersebut

var i = new Image(); // buat object image() i.onload = function() {

// pada saat proses ini dijalankan, berarti gambar telah selesai didownload.

var data_yang_akan_dikirim = { 'url' : this.src, 'width' : this.width, 'height' : this.height }

__aktifkan_lightbox(data_yang_akan_dikirim); // jalankan fungsi untuk memunculkan lightbox

};

i.src = $(this).attr('src'); // mengisi target url gambar yang ada pada $(elm)

});

// fungsi ini kita jalankan untuk memunculkan

lightbox nya

function

__aktifkan_lightbox(data_yang_akan_dikirim) {

var data = data_yang_akan_dikirim; // kita redefine variable nya biar ga kepanjangan.

$(".lightboxgue .lightboxgue-showup img").attr( 'src', data.url ); // kita masukkan url gambarnya ke element img yang ada di .lightboxgue

$(".lightboxgue").fadeIn(); // tampilkan lightbox!

} // end of function __aktifkan_lightbox

}; }) (jQuery);

yipiii, sekarang coba deh, kamu refresh browser nya dan kamu klik lagi gambarnya, apakah muncul lightbox nya? muncul kan? tapi tampilannya kurang pas ya sama browser

(10)

8. step ke delapan

di langkah ini kita ingin membuat gambar pada lightbox mendapatkan posisi yang bagus, tapi akan ada sedikit matematika di sini, karena urusan nya itu adalah dengan angka. :p gampang kok, cuma perhitungan dasar saja. ga sampai ke kalkulus! hahaha

pertama, kita butuh 2 gambar baru pada file html untuk ukuran portrait dan landscape <!DOCTYPE html>

src='jquery.lightboxgue.js'></script> </head>

<body>

<img src='landscape.jpg' width='200' />

<img src='portrait.jpg' height='100' />

</body> </html>

$("img").lightboxgue(); // ayo kita test pluginnya. </script>

sekarang kita lanjut ke bagian javascript nya /**

*/

( function($) {

/**

(11)

jadi wajib bagi kita untuk mengecek kembali apakah itu element gambar atau bukan?

*/

// fungsi untuk mengaktifkan event click pada kejadian menutup lightbox

$("body .lightboxgue span.close").click( function() {

$("body .lightboxgue").fadeOut(); });

// menjalankan fungsi __reset_style terlebih dahulu

// untuk merest ulang style yang ada pada .lightboxgue-container

__reset_style();

// yang sekarang akan kita lakukan pada gambar ini adalah

// mendownload data gambar terlebih dahulu agar kita bisa mengetahui

// tinggi dan lebar yang sebenarnya pada gambar tersebut

var i = new Image(); // buat object image() i.onload = function() {

// pada saat proses ini dijalankan, berarti gambar telah selesai didownload.

(12)

'url' : this.src, 'width' : this.width, 'height' : this.height }

__aktifkan_lightbox(data_yang_akan_dikirim); // jalankan fungsi untuk memunculkan lightbox

};

i.src = $(this).attr('src'); // mengisi target url gambar yang ada pada $(elm)

});

// fungsi untuk mereset ulang style" yang telah

diberikan pada

// element .lightboxgue-container pada saat penggunaan ulang function __reset_style() { $(".lightboxgue .lightboxgue-container").css({ "width": '50%', "margin": 0, "left": 0 }); $(".lightboxgue .lightboxgue-container .lightboxgue-showup img").css({ "width": "100%", "height": "auto" }); } // end of __reset_style

// fungsi ini kita jalankan untuk memunculkan lightbox nya

function

__aktifkan_lightbox(data_yang_akan_dikirim) {

var data = data_yang_akan_dikirim; // kita redefine variable nya biar ga kepanjangan.

$(".lightboxgue .lightboxgue-showup img").attr( 'src', data.url ); // kita masukkan url gambarnya ke element img yang ada di .lightboxgue

// data width dan height yang kita dapatkan itu berfungsi untuk mengatur ulang

// lebar dan tingginya agar sesuai dengan browser nya.

// kita akan menggunakan sedikit matematika pada function suggest_size :p

(13)

var window_width = $(window).width(); // mendapatkan lebar browser,

var window_height = $(window).height(); // mendapatkan tinggi browser

// yang pertama kita lakukan adalah mendapatkan tipe gambarnya

// antara landscape ataukah portrait var tipe; // tipe gambar

if( data.height > data.width ) { tipe = 'portrait'; } else { tipe = 'landscape'; } switch( tipe ) { case 'portrait':

// kalau tipe nya portrait ini mudah, buat saja tingginya menjadi sama seperti tinggi browser

$(".lightboxgue .lightboxgue-container img").css({ "height": String(window_height)+'px', "width": 'auto' });

// ingat! lebar yang kita atur sebelumnya pada .lightboxgue-container itu adalah 50%

// ini akan membuat gambar menjadi aneh karena dipaksakan untuk mengikuti ukuran dari element .lightboxgue-container

// oleh karena itu, kita harus ubah lebar dari .lightboxgue-container menjadi sesuai dengan perubahan pada lebar gambar portrait

// rumusnya adalah ---> lebar_gambar x persen_perubahan // persen_perubahan adalah ---> tinggi_browser : tinggi_gambar var lebar_baru_pada_portrait = data.width * (window_height/data.height); $(".lightboxgue .lightboxgue-container").css("width", String(lebar_baru_pada_portrait)+'px');

// agar gambar muncul di tengah-tengah layar (karena kode diatas gambar hanya akan muncul di sebelah kiri)

// kita ubah css nya pada element .lightboxgue-container seperti berikut

$(".lightboxgue .lightboxgue-container").css({

(14)

"margin-left": "-" + String(lebar_baru_pada_portrait/2) + "px"

}); break;

case 'landscape':

// pada tipe landscape, kita ubah lebar .lightboxgue-container menjado 60%

$(".lightboxgue .lightboxgue-container").css({

"width": "60%",

"margin-left": "20%" // agar posisinya berada di tengah layar

});

// pada saat ini letak gambar sudah terletak di tengah, namun

// posisi pada koordinat Y tidak berada di tengah, untuk menanggulangi keadaan ini

// kita harus menghitung kembali dengan rumus yang sama seperti pada portrait

// yang pertama harus kita dapatkan itu adalah persenan perubahan tinggi

// rumusnya hampir sama pada tipe yang portrait

var lebar_baru = data.width*0.6; // 0.6 adalah 60% yang belum di kali 100, sama aja kok dengan 60% = 60/100 = 0.6

var tinggi_baru = data.height * ( lebar_baru/data.width );

// pada variable whitespace itu adalah tempat kosong yang ada di bawah photo yang ada di lightbox

var whitespace = Math.abs( window_height - tinggi_baru );

// di atas kita lihat ada fungsi Math.abs() apa itu? itu adalah fungsi dari javascript untuk mendapatkan nilai mutlak

// kalau di matematika sama saja seperti ini ---> whitespace = |x-y|

// kenapa harus seperti itu? itu karena kita tidak akan pernah tahu apakah tinggi window lebih besar dari gambar

// oleh karena itu rumus mutlak disini sangat berpengaruh, lagipula hasilnya akan tetap sama kok, tak peduli mana yang lebih besar, karena sudah dimutlakkan ke angka positif $(".lightboxgue

.lightboxgue-container").css("margin-top", String(whitespace/2)+"px"); // mengatur ulang margin atas agar letaknya di tengah koordinat Y

(15)

break; } // switch

$(".lightboxgue").fadeIn(); // tampilkan lightbox!

} // end of function __aktifkan_lightbox

}; }) (jQuery);

okay, selesai juga akhirnya, untuk final codenya ada di bawah sini

demo.html <!DOCTYPE html> <html lang='en'> <head> <meta charset='UTF-8' /> <title>lightbox gue</title>

src='jquery.lightboxgue.js'></script> </head>

<body>

</body> </html>

(16)

</script>

lightboxgue.css

/*

.lightboxgue {

top: 0; /* memaksa element untuk berada pada posisi diatas, */ left: 0; /* memaksa element untuk berada pada posisi paling kiri */

z-index: 100000; /* opsi ini dibutuhkan agar posisi element lightbox berada pada tingkat paling atas */

display: none; /* kita hilangkan elementnya agar ga langsung muncul */

}

/*

.lightboxgue-container akan kita gunakan sebagai penampil data pada lightbox

lebar dan tinggi pada element ini akan kita atur pada file javascript nya.

begitu juga pada posisi dari element ini. */

.lightboxgue-container {

position: relative; /* kitab buat relative agar element

.lightboxgue-panel bisa keluar dari element dengan posisi absolute */ width: 50%; /* lebar ini hanya untuk menahan posisi, nanti akan kita ubah lebarnya dengan javascript */

}

.lightboxgue-showup {

/* karena element ini ada di dalam .lightboxgue-container maka biarkan

(17)

element ini mengikuti setiap perubahan bentuk pada .lightboxgue-container */

width: 100%; height: 100%; }

.lightboxgue-showup img{ width: 100%; } /* kita ubah ke 100% agar mengikuti lebar dari .lightboxgue-container */

.lightboxgue-panel {

/* posisi absolute akan memungkinkan kita mengatur letak posisi secara bebas,

namun itu juga tergantung pada parent elementnya, itu alasannya kenapa kita mengatur .lightboxgue-container menjadi relative position. */ position: absolute;

color: #fff; top: 0;

right: -20px;

/* opsi ini kita buat agar posisinya berada di luar element parent */

}

.lightboxgue-panel span.close{ color:red; cursor:pointer; } /* style untuk tombol close nya */

jquery.lightboxgue.js

/**

*/

( function($) {

/**

*/

(18)

// fungsi untuk mengaktifkan event click pada kejadian menutup lightbox

$("body .lightboxgue span.close").click( function() {

$("body .lightboxgue").fadeOut(); });

// yang sekarang akan kita lakukan pada gambar ini adalah

// mendownload data gambar terlebih dahulu agar kita bisa mengetahui

// tinggi dan lebar yang sebenarnya pada gambar tersebut

var i = new Image(); // buat object image() i.onload = function() {

// pada saat proses ini dijalankan, berarti gambar telah selesai didownload.

var data_yang_akan_dikirim = { 'url' : this.src, 'width' : this.width, 'height' : this.height }

__aktifkan_lightbox(data_yang_akan_dikirim); // jalankan fungsi untuk memunculkan lightbox

(19)

i.src = $(this).attr('src'); // mengisi target url gambar yang ada pada $(elm)

});

// fungsi ini kita jalankan untuk memunculkan lightbox nya

function

__aktifkan_lightbox(data_yang_akan_dikirim) {

var data = data_yang_akan_dikirim; // kita redefine variable nya biar ga kepanjangan.

$(".lightboxgue .lightboxgue-showup img").attr( 'src', data.url ); // kita masukkan url gambarnya ke element img yang ada di .lightboxgue

// data width dan height yang kita dapatkan itu berfungsi untuk mengatur ulang

// lebar dan tingginya agar sesuai dengan browser nya.

// kita akan menggunakan sedikit matematika pada function suggest_size :p

var window_width = $(window).width(); // mendapatkan lebar browser,

var window_height = $(window).height(); // mendapatkan tinggi browser

// yang pertama kita lakukan adalah mendapatkan tipe gambarnya

// antara landscape ataukah portrait var tipe; // tipe gambar

if( data.height > data.width ) { tipe = 'portrait'; } else { tipe = 'landscape'; } switch( tipe ) { case 'portrait':

// kalau tipe nya portrait ini mudah, buat saja tingginya menjadi sama seperti tinggi browser

$(".lightboxgue .lightboxgue-container img").css({ "height": String(window_height)+'px', "width": 'auto' });

// ingat! lebar yang kita atur sebelumnya pada .lightboxgue-container itu adalah 50%

// ini akan membuat gambar menjadi aneh karena dipaksakan untuk mengikuti ukuran dari element

(20)

.lightboxgue-container

// oleh karena itu, kita harus ubah lebar dari .lightboxgue-container menjadi sesuai dengan perubahan pada lebar gambar portrait

// rumusnya adalah ---> lebar_gambar x persen_perubahan // persen_perubahan adalah ---> tinggi_browser : tinggi_gambar var lebar_baru_pada_portrait = data.width * (window_height/data.height); $(".lightboxgue .lightboxgue-container").css("width", String(lebar_baru_pada_portrait)+'px');

// agar gambar muncul di tengah-tengah layar (karena kode diatas gambar hanya akan muncul di sebelah kiri)

// kita ubah css nya pada element .lightboxgue-container seperti berikut

$(".lightboxgue .lightboxgue-container").css({ "left": "50%", "margin-left": "-" + String(lebar_baru_pada_portrait/2) + "px" }); break; case 'landscape':

// pada tipe landscape, kita ubah lebar .lightboxgue-container menjado 60%

$(".lightboxgue .lightboxgue-container").css({

"width": "60%",

"margin-left": "20%" // agar posisinya berada di tengah layar

});

// pada saat ini letak gambar sudah terletak di tengah, namun

// posisi pada koordinat Y tidak berada di tengah, untuk menanggulangi keadaan ini

// kita harus menghitung kembali dengan rumus yang sama seperti pada portrait

// yang pertama harus kita dapatkan itu adalah persenan perubahan tinggi

// rumusnya hampir sama pada tipe yang portrait

var lebar_baru = data.width*0.6; // 0.6 adalah 60% yang belum di kali 100, sama aja kok dengan 60% = 60/100 = 0.6

(21)

var tinggi_baru = data.height * ( lebar_baru/data.width );

// pada variable whitespace itu adalah tempat kosong yang ada di bawah photo yang ada di lightbox

var whitespace = Math.abs( window_height - tinggi_baru );

// di atas kita lihat ada fungsi Math.abs() apa itu? itu adalah fungsi dari javascript untuk mendapatkan nilai mutlak

// kalau di matematika sama saja seperti ini ---> whitespace = |x-y|

// kenapa harus seperti itu? itu karena kita tidak akan pernah tahu apakah tinggi window lebih besar dari gambar

// oleh karena itu rumus mutlak disini sangat berpengaruh, lagipula hasilnya akan tetap sama kok, tak peduli mana yang lebih besar, karena sudah dimutlakkan ke angka positif $(".lightboxgue

.lightboxgue-container").css("margin-top", String(whitespace/2)+"px"); // mengatur ulang margin atas agar letaknya di tengah koordinat Y

break; } // switch

$(".lightboxgue").fadeIn(); // tampilkan lightbox!

} // end of function __aktifkan_lightbox

}; }) (jQuery);

manusia tidak akan pernah luput dari kesalahan, tentunya plugin tersebut hanya untuk bahan pembelajaran jadi tidak terlalu complex mengenai tinggi dan lebar browser, viewport, blablabla... :) semoga tutorial ini berguna untuk kita semua sebagai pemula di pemrograman aplikasi website...

(22)

buat Lightbox mu sendiri dengan jquery