Buat Lightbox Mu Sendiri Dengan Jquery

26 views

assalamualikum wr wb.

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

sudah aneka macam plugin-plugin jquery perihal 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 menciptakan lightbox tersebut dengan cara sendiri.

untuk yang belum tahu perihal cara membaut plugin jquery, silahkan kau coba cari di website ini perihal tutorial “membuat plugin jquery” sebab pada tutorial ini kita akan pribadi ngoding lightbox tersebut dengan menciptakan pluginnya sekaligus.

 

apa saja skill yang kita butuhkan untuk menciptakan lightbox ini?

1. html
2. css
3. js
4. jquery

 

berikut ialah 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 goresan pena yang berupa code/script, yang berhuruf tebal ialah code/script yang telah di ubah

 

1. Step pertama

kita buat satu file html berjulukan 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; // biar posisi nya mengikuti browser  background: #000; // background berwarna hitam untuk yang tidak support rgba  background: rgba(0,0,0,0.5); // bila 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 diharapkan biar posisi element lightbox berada pada tingkat paling atas}

 

nah, kini 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 diharapkan 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'> <!-- lightboxgue-showup ialah data yang akan kita tampilan [untuk ketika ini hanya berupa gambar] -->  <div class='lightboxgue-showup'><img src='something.jpg' />  </div>  <!-- lightboxgue-panel ini akan berfungsi toolbar dari lightbox yang akan kita buat -->  <div class='lightboxgue-panel'><span class='close'>x</span>  </div> <!-- .lightboxgue-panel --></div> <!-- .lightboxgue-container -->  </div> <!-- .lightboxgue --><h1>test html untuk memastikan class lightbox tidak bermasalah</h1></body></html>

 

4. step ke empat

sekarang kita tambah kan style gres 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; /* biar posisi nya mengikuti browser */  background: #000; /* background berwarna hitam untuk yang tidak support rgba */  background: rgba(0,0,0,0.5); /* bila 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 diharapkan biar 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 biar element .lightboxgue-panel sanggup 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 {  /* sebab 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% biar 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 biar posisinya berada di luar element parent */}.lightboxgue-panel span.close{ color:red; cursor:pointer; } /* style untuk tombol close nya */

 

5. step ke lima

okay, kini tampilan lightbox sudah kita buat, kini saatnya kita menciptakan file plugin jquery nya!
buat file javascript berjulukan jquery.lightboxgue.js.

/** * tutorial menciptakan lightbox di website jagocoding.com * author: putra surya herlambang */( function($) {$.fn.lightboxgue = function() {var elm = this; /**tutorial ini hanya untuk lightbox pada gambarjadi wajib bagi kita untuk mengecek kembali apakah itu element gambar atau bukan?*/if( elm.is('img') ) { // copy semua html .lightboxgue kedalam variable inivar $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);}// kini kita akan buat event klik pada gambar yang sudah kita pilih$(elm).click( function(e) {alert('yesss, gambarnya sanggup diklik.');});} // end of logical is it image?return this; // mengembalikan element nya biar rantai framework tidak terputus};}) (jQuery);

 

6. step ke enam

nah, sebab 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><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, kini coba deh di klik gambarnya, muncul alert ga? kalo muncul berarti berhasil. kini kita edit file css lightboxgue.css nya biar element lightboxgue tidak pribadi 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; /* biar posisi nya mengikuti browser */background: #000; /* background berwarna hitam untuk yang tidak support rgba */background: rgba(0,0,0,0.5); /* bila 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 diharapkan biar posisi element lightbox berada pada tingkat paling atas */display: none; /* kita hilangkan elementnya biar ga pribadi 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 menciptakan lightbox di website jagocoding.com * author: putra surya herlambang */( function($) {$.fn.lightboxgue = function() {var elm = this; /**tutorial ini hanya untuk lightbox pada gambarjadi wajib bagi kita untuk mengecek kembali apakah itu element gambar atau bukan?*/if( elm.is('img') ) { // copy semua html untuk element .lightboxgue kedalam variable inivar $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);// fungsi untuk mengaktifkan event click pada insiden menutup lightbox$("body .lightboxgue span.close").click( function() {$("body .lightboxgue").fadeOut();});} // end of logical lightbox yang sudah eksis// kini kita akan buat event klik pada gambar yang sudah kita pilih$(elm).click( function(e) {// yang kini akan kita lakukan pada gambar ini adalah// mendownload data gambar terlebih dahulu biar kita sanggup mengetahui// tinggi dan lebar yang sesungguhnya pada gambar tersebutvar i = new Image(); // buat object image()i.onload = function() {// pada ketika 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 sasaran url gambar yang ada pada $(elm)});// fungsi ini kita jalankan untuk memunculkan lightbox nyafunction __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 biar rantai framework tidak terputus};}) (jQuery);

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

 

8. step ke delapan

di langkah ini kita ingin menciptakan gambar pada lightbox mendapat posisi yang bagus, tapi akan ada sedikit matematika di sini, sebab urusan nya itu ialah dengan angka.  simpel kok, cuma perhitungan dasar saja. ga hingga ke kalkulus! hahaha

pertama, kita butuh 2 gambar gres 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 belahan javascript nya

/** * tutorial menciptakan lightbox di website jagocoding.com * author: putra surya herlambang */( function($) {$.fn.lightboxgue = function() {var elm = this; /**tutorial ini hanya untuk lightbox pada gambarjadi wajib bagi kita untuk mengecek kembali apakah itu element gambar atau bukan?*/if( elm.is('img') ) { // copy semua html untuk element .lightboxgue kedalam variable inivar $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);// fungsi untuk mengaktifkan event click pada insiden menutup lightbox$("body .lightboxgue span.close").click( function() {$("body .lightboxgue").fadeOut();});} // end of logical lightbox yang sudah eksis// kini 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 kini akan kita lakukan pada gambar ini adalah// mendownload data gambar terlebih dahulu biar kita sanggup mengetahui// tinggi dan lebar yang sesungguhnya pada gambar tersebutvar i = new Image(); // buat object image()i.onload = function() {// pada ketika 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 sasaran url gambar yang ada pada $(elm)});


            // fungsi untuk mereset ulang style" yang telah diberikan pada
            // element .lightboxgue-container pada ketika 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 nyafunction __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 biar sesuai dengan browser nya.// kita akan memakai sedikit matematika pada function suggest_size  var window_width = $(window).width(); // mendapat lebar browser, var window_height = $(window).height(); // mendapat tinggi browser// yang pertama kita lakukan ialah mendapat tipe gambarnya// antara landscape ataukah portraitvar tipe; // tipe gambarif( data.height > data.width ) {tipe = 'portrait';} else {tipe = 'landscape';}switch( tipe ) {case 'portrait': // kalau tipe nya portrait ini mudah, buat saja tingginya menjadi sama menyerupai tinggi browser $(".lightboxgue .lightboxgue-container img").css({"height": String(window_height)+'px',"width": 'auto'}); // ingat! lebar yang kita atur sebelumnya pada .lightboxgue-container itu ialah 50% // ini akan menciptakan gambar menjadi absurd sebab dipaksakan untuk mengikuti ukuran dari element .lightboxgue-container // oleh sebab itu, kita harus ubah lebar dari .lightboxgue-container menjadi sesuai dengan perubahan pada lebar gambar portrait // rumusnya ialah -------> lebar_gambar x persen_perubahan // persen_perubahan ialah -------> 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'); // biar gambar muncul di tengah-tengah layar (karena instruksi diatas gambar hanya akan muncul di sebelah kiri) // kita ubah css nya pada element .lightboxgue-container menyerupai 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%" // biar posisinya berada di tengah layar}); // pada ketika 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 menyerupai pada portrait // yang pertama harus kita dapatkan itu ialah persenan perubahan tinggi // rumusnya hampir sama pada tipe yang portrait var lebar_baru = data.width*0.6; // 0.6 ialah 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 ialah daerah 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 ialah fungsi dari javascript untuk mendapat nilai mutlak // kalau di matematika sama saja menyerupai ini --------> whitespace = |x-y| // kenapa harus menyerupai itu? itu sebab kita tidak akan pernah tahu apakah tinggi window lebih besar dari gambar // oleh sebab itu rumus mutlak disini sangat berpengaruh, lagipula hasilnya akan tetap sama kok, tak peduli mana yang lebih besar, sebab sudah dimutlakkan ke angka nyata $(".lightboxgue .lightboxgue-container").css("margin-top", String(whitespace/2)+"px"); // mengatur ulang margin atas biar letaknya di tengah koordinat Ybreak;} // switch$(".lightboxgue").fadeIn(); // tampilkan lightbox!} // end of function __aktifkan_lightbox} // end of logical is it image?return this; // mengembalikan element nya biar 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.</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; /* biar posisi nya mengikuti browser */background: #000; /* background berwarna hitam untuk yang tidak support rgba */  background: rgba(0,0,0,0.5); /* bila 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 diharapkan biar posisi element lightbox berada pada tingkat paling atas */display: none; /* kita hilangkan elementnya biar ga pribadi muncul */}/*  .lightboxgue-container akan kita gunakan sebagai penampil data pada lightboxlebar 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 biar element .lightboxgue-panel sanggup keluar dari element dengan posisi absolute */width: 50%; /* lebar ini hanya untuk menahan posisi, nanti akan kita ubah lebarnya dengan javascript */}.lightboxgue-showup {/* sebab 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% biar 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 biar posisinya berada di luar element parent */}.lightboxgue-panel span.close{ color:red; cursor:pointer; } /* style untuk tombol close nya */

 

jquery.lightboxgue.js

/** * tutorial menciptakan lightbox di website jagocoding.com * author: putra surya herlambang */( function($) {$.fn.lightboxgue = function() {var elm = this; /**tutorial ini hanya untuk lightbox pada gambarjadi wajib bagi kita untuk mengecek kembali apakah itu element gambar atau bukan?*/if( elm.is('img') ) { // copy semua html untuk element .lightboxgue kedalam variable inivar $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);// fungsi untuk mengaktifkan event click pada insiden menutup lightbox$("body .lightboxgue span.close").click( function() {$("body .lightboxgue").fadeOut();});} // end of logical lightbox yang sudah eksis// kini kita akan buat event klik pada gambar yang sudah kita pilih$(elm).click( function(e) {// yang kini akan kita lakukan pada gambar ini adalah// mendownload data gambar terlebih dahulu biar kita sanggup mengetahui// tinggi dan lebar yang sesungguhnya pada gambar tersebutvar i = new Image(); // buat object image()i.onload = function() {// pada ketika 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 sasaran url gambar yang ada pada $(elm)});// fungsi ini kita jalankan untuk memunculkan lightbox nyafunction __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 biar sesuai dengan browser nya.// kita akan memakai sedikit matematika pada function suggest_size  var window_width = $(window).width(); // mendapat lebar browser, var window_height = $(window).height(); // mendapat tinggi browser// yang pertama kita lakukan ialah mendapat tipe gambarnya// antara landscape ataukah portraitvar tipe; // tipe gambarif( data.height > data.width ) {tipe = 'portrait';} else {tipe = 'landscape';}switch( tipe ) {case 'portrait': // kalau tipe nya portrait ini mudah, buat saja tingginya menjadi sama menyerupai tinggi browser $(".lightboxgue .lightboxgue-container img").css({"height": String(window_height)+'px',"width": 'auto'});  // ingat! lebar yang kita atur sebelumnya pada .lightboxgue-container itu ialah 50% // ini akan menciptakan gambar menjadi absurd sebab dipaksakan untuk mengikuti ukuran dari element .lightboxgue-container // oleh sebab itu, kita harus ubah lebar dari .lightboxgue-container menjadi sesuai dengan perubahan pada lebar gambar portrait // rumusnya ialah -------> lebar_gambar x persen_perubahan // persen_perubahan ialah -------> 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');  // biar gambar muncul di tengah-tengah layar (karena instruksi diatas gambar hanya akan muncul di sebelah kiri) // kita ubah css nya pada element .lightboxgue-container menyerupai 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%" // biar posisinya berada di tengah layar});  // pada ketika 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 menyerupai pada portrait  // yang pertama harus kita dapatkan itu ialah persenan perubahan tinggi  // rumusnya hampir sama pada tipe yang portrait var lebar_baru = data.width*0.6; // 0.6 ialah 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 ialah daerah 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 ialah fungsi dari javascript untuk mendapat nilai mutlak // kalau di matematika sama saja menyerupai ini --------> whitespace = |x-y|  // kenapa harus menyerupai itu? itu sebab kita tidak akan pernah tahu apakah tinggi window lebih besar dari gambar // oleh sebab itu rumus mutlak disini sangat berpengaruh, lagipula hasilnya akan tetap sama kok, tak peduli mana yang lebih besar, sebab sudah dimutlakkan ke angka nyata  $(".lightboxgue .lightboxgue-container").css("margin-top", String(whitespace/2)+"px"); // mengatur ulang margin atas biar letaknya di tengah koordinat Ybreak;} // switch$(".lightboxgue").fadeIn(); // tampilkan lightbox!} // end of function __aktifkan_lightbox} // end of logical is it image?return this; // mengembalikan element nya biar rantai framework tidak terputus};}) (jQuery);

 

manusia tidak akan pernah luput dari kesalahan, tentunya plugin tersebut hanya untuk materi pembelajaran jadi tidak terlalu complex mengenai tinggi dan lebar browser, viewport, blablabla…

semoga tutorial ini berkhasiat untuk kita semua sebagai pemula di pemrograman aplikasi website…

 

terima kasih. wassalamualikum wr.wb.

Author: 
    author
    No related post!