buat Lightbox mu sendiri dengan jquery

Transkripsi

1

2 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

3 1. Step pertama kita buat satu file html bernama demo.html <!DOCTYPE html> <html lang='en'> <head> <meta charset='utf-8' /> <title>lightbox gue</title> <link rel='stylesheet' type='text/css' href='lightboxgue.css' /> </head> <body> <h1>test html untuk memastikan class lightbox tidak bermasalah</h1> <div class='lightboxgue'> <span style='color:#fff'>aku anak dari element lightbox</span> </div> <h1>test html untuk memastikan class lightbox tidak bermasalah</h1> </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 z-index: ; // opsi ini dibutuhkan agar posisi element lightbox berada pada tingkat paling atas

4 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> <meta charset='utf-8' /> <title>lightbox gue</title> <link rel='stylesheet' type='text/css' href='lightboxgue.css' /> </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> </html> 4. step ke empat

5 sekarang kita tambah kan style baru pada file css lightboxgue.css. /* 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 z-index: ; /* 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

6 .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>"); // untuk pertama kalinya kita haru memeriksa,

7 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); yang sudah kita pilih // sekarang kita akan buat event klik pada gambar $(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> <meta charset='utf-8' /> <title>lightbox gue</title> <link rel='stylesheet' type='text/css' href='lightboxgue.css' /> <script type='text/javascript' src='jquery.min.js'></script> <script type='text/javascript' src='jquery.lightboxgue.js'></script> </head> <body> <h1>test html untuk memastikan class lightbox tidak bermasalah</h1>

8 <img src='something.jpg' width='200' /> <h1>test html untuk memastikan class lightbox tidak bermasalah</h1> </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 /* 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 z-index: ; /* 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. /** * tutorial membuat lightbox di website jagocoding.com * author: putra surya herlambang

9 ( 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 untuk element.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>"); // untuk pertama kalinya kita haru memeriksa, 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); pada kejadian menutup lightbox function() { // fungsi untuk mengaktifkan event click $("body.lightboxgue span.close").click( $("body.lightboxgue").fadeout(); // end of logical lightbox yang sudah eksis yang sudah kita pilih gambar ini adalah agar kita bisa mengetahui // sekarang kita akan buat event klik pada gambar $(elm).click( function(e) { // yang sekarang akan kita lakukan pada // mendownload data gambar terlebih dahulu // tinggi dan lebar yang sebenarnya pada

10 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 // end of logical is it image? return this; // mengembalikan element nya agar rantai framework tidak terputus ; ) (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

11 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> <html lang='en'> <head> <meta charset='utf-8' /> <title>lightbox gue</title> <link rel='stylesheet' type='text/css' href='lightboxgue.css' /> <script type='text/javascript' src='jquery.min.js'></script> <script type='text/javascript' src='jquery.lightboxgue.js'></script> </head> <body> <h1>test html untuk memastikan class lightbox tidak bermasalah</h1> <img src='landscape.jpg' width='200' /> <img src='portrait.jpg' height='100' /> <h1>test html untuk memastikan class lightbox tidak bermasalah</h1> </body> </html> <script type='text/javascript'> $("img").lightboxgue(); // ayo kita test pluginnya. </script> sekarang kita lanjut ke bagian javascript nya /** * 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

12 jadi wajib bagi kita untuk mengecek kembali apakah itu element gambar atau bukan? if( elm.is('img') ) { // copy semua html untuk element.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>"); // untuk pertama kalinya kita haru memeriksa, 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); pada kejadian menutup lightbox function() { // fungsi untuk mengaktifkan event click $("body.lightboxgue span.close").click( $("body.lightboxgue").fadeout(); // end of logical lightbox yang sudah eksis // sekarang kita akan buat event klik pada gambar yang sudah kita pilih $(elm).click( function(e) { // 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. var data_yang_akan_dikirim = {

13 this.width, this.height 'url' : this.src, 'width' : '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

14 mendapatkan lebar browser, mendapatkan tinggi browser mendapatkan tipe gambarnya var window_width = $(window).width(); // var window_height = $(window).height(); // // yang pertama kita lakukan adalah // 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({ "left": "50%",

15 String(lebar_baru_pada_portrait/2) + "px" break; "margin-left": "-" + 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

16 break; // switch lightbox! $(".lightboxgue").fadein(); // tampilkan // end of function aktifkan_lightbox // end of logical is it image? return this; // mengembalikan element nya agar rantai framework tidak terputus ; ) (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> <link rel='stylesheet' type='text/css' href='lightboxgue.css' /> <script type='text/javascript' src='jquery.min.js'></script> <script type='text/javascript' src='jquery.lightboxgue.js'></script> </head> <body> <h1>test html untuk memastikan class lightbox tidak bermasalah</h1> <img src='landscape.jpg' width='200' /> <img src='portrait.jpg' height='100' /> <h1>test html untuk memastikan class lightbox tidak bermasalah</h1> </body> </html> <script type='text/javascript'> $("img").lightboxgue(); // ayo kita test pluginnya.

17 </script> lightboxgue.css /* 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 z-index: ; /* 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

18 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 /** * 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') ) { kedalam variable ini // copy semua html untuk element.lightboxgue

19 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>"); // untuk pertama kalinya kita haru memeriksa, 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); pada kejadian menutup lightbox function() { // fungsi untuk mengaktifkan event click $("body.lightboxgue span.close").click( $("body.lightboxgue").fadeout(); // end of logical lightbox yang sudah eksis // sekarang kita akan buat event klik pada gambar yang sudah kita pilih $(elm).click( function(e) { // 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 ;

20 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 mendapatkan tipe gambarnya // yang pertama kita lakukan adalah // 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

21 .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

22 lebar_baru/data.width ); var tinggi_baru = data.height * ( // 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 lightbox! $(".lightboxgue").fadein(); // tampilkan // end of function aktifkan_lightbox // end of logical is it image? return this; // mengembalikan element nya agar rantai framework tidak terputus ; ) (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... terima kasih. wassalamualikum wr.wb.

23 Tentang Penulis putra surya herlambang