Wikipedia - Lightbox, ialah teknik JavaScript yang dipakai untuk menampilkan gambar besar dengan memakai modal dialog. Efeknya telah mendapat popularitas luas alasannya ialah gaya yang sederhana namun elegan dan dengan implementasi yang mudah. Pernah berpikir untuk membuatnya sendiri?
Konsepnya bergotong-royong sangat sederhana. Kita hanya akan mengirim nilai atribut href dari sebuah tautan menuju atribut src pada gambar dikala tautan tersebut diklik:
Dan hal itu sanggup dilakukan dengan gampang memakai jQuery .attr():
// Saat sebuah tautan diklik... $('a').click(function() { // Set nilai src pada gambar menjadi nilai href dari tautan yang diklik $('img').attr('src', this.href); return false; });Menyaring Tautan
Namun muncul satu dilema lagi, terutama kalau Anda mempunyai beberapa tautan dengan nilai href yang bukan mengarahkan Anda menuju gambar, melainkan mengarahkan Anda menuju halaman lain. Jika tautan-tautan yang tidak sesuai diklik, maka atribut src pada elemen <img> sanggup menjadi tidak layak alasannya ialah nilainya bukan berupa gambar. Kita tidak ingin mengalami hal menyerupai ini dikala sebuah tautan diklik:
<img src="//api.jquery.com" alt=" ialah teknik JavaScript yang dipakai untuk menampilkan gambar besar dengan memakai Konsep jQuery Lightbox" />Untuk itu kita harus menyaringnya supaya tautan yang dikehendaki benar-benar tautan yang mengandung URL gambar, bukan URL halaman lain. Ada beberapa cara. Misalnya, alasannya ialah kebanyakan lightbox ditampilkan dikala sebuah thumbnail diklik, maka kita sanggup memakai selektor ini:
$('a:has(img)')Selektor di atas hanya akan menyeleksi semua elemen <a> (tautan) yang mempunyai elemen <img> (gambar) di dalamnya. Atau sanggup juga memakai selektor atribut untuk mendeteksi ekstensi final file pada URL:
$('a[href$=".jpg"], a[href$=".png"], a[href$=".gif"], a[href$=".bmp"]')Selektor di atas hanya akan menyeleksi semua elemen <a> (tautan) yang mempunyai atribut href dengan nilai final .jpg, .png, .gif dan .bmp yang notabene merupakan URL gambar. Atau sanggup juga dengan cara biasa: menerapkan kelas tertentu yang spesifik pada tautan gambar menyerupai ini:
$('a.openLightbox')Pada pada dasarnya apa yang kita lakukan hanyalah mencoba menyaring setiap tautan yang ada supaya hal-hal yang tidak kita inginkan tidak terjadi (baca Selektor jQuery)
Kemudian, alasannya ialah ini ialah lightbox, maka Saya pikir, dampak animasi dan tabir/overlay menjadi dua faktor yang penting juga. Katakanlah kita ingin menampilkan tabir dikala sebuah tautan gambar diklik dan menganimasikan gambar dengan dampak .fadeIn() dikala gambar telah selesai dimuat. Maka kita sanggup menuliskannya menyerupai ini:
CSS
#overlay { position:absolute; top:0px; right:0px; bottom:0px; left:0px; z-index:998; background-color:black; opacity:0.8; display:none; } img#large { position:absolute; top:30px; left:30px; z-index:999; display:none; }jQuery
// Sisipkan gambar dan overlay // dengan jQuery .append() untuk meminimalisasi markup $('body').append('<div id="overlay"></div><img id="large" />'); var validURL = $('a[href$=".jpg"], a[href$=".png"], a[href$=".gif"], a[href$=".bmp"]'); // Saat sebuah tautan gambar diklik... validURL.click(function() { // Tampilkan overlay $('#overlay').show(); // Set nilai atribut src pada gambar besar menjadi nilai atribut href dari tautan yang diklik $('img#large').attr('src', this.href); return false; }); // Tampilkan gambar besar dengan dampak .fadeIn() dikala telah termuat $('img#large').load(function() { $(this).fadeIn(); }); // Hilangkan gambar dan overlay dikala overlay diklik $('#overlay').click(function() { $(this).hide(); $('img#large').removeAttr('src').fadeOut(); });Judul Gambar...
Setelah itu, pertimbangan fitur-fitur lain menyerupai menyisipkan judul atau deskripsi gambar mungkin juga ingin ditambahkan. Tidak masalah, kita sanggup memakai atribut lain sebagai materi penyimpan judul. Misalnya kita akan menyimpan judul gambar pada atribut title dalam tautan menyerupai lightbox pada umumnya:
<a href="gambar1.jpg" title="Konsep jQuery Lightbox"> <img src="thumbnail1.jpg" alt=" ialah teknik JavaScript yang dipakai untuk menampilkan gambar besar dengan memakai Konsep jQuery Lightbox" /> </a> <a href="gambar2.jpg" title="Konsep jQuery Lightbox"> <img src="thumbnail2.jpg" alt=" ialah teknik JavaScript yang dipakai untuk menampilkan gambar besar dengan memakai Konsep jQuery Lightbox" /> </a> <a href="gambar3.jpg" title="Konsep jQuery Lightbox"> <img src="thumbnail3.jpg" alt=" ialah teknik JavaScript yang dipakai untuk menampilkan gambar besar dengan memakai Konsep jQuery Lightbox" /> </a>Sampai di sini kita masih tetap tidak akan jauh dari atribut tautan. Pertama-tama kita buat elemen sebagai kontainer judul gambar, katakanlah #imgCap. Kita akan memakai itu untuk menyisipkan nilai atribut title:
jQuery
// Sisipkan gambar, ruang judul dan overlay // dengan jQuery .append() untuk meminimalisasi markup $('body').append('<div id="overlay"></div><div id="imgCap"></div><img id="large" />'); var validURL = $('a[href$=".jpg"], a[href$=".png"], a[href$=".gif"], a[href$=".bmp"]'); // Saat sebuah tautan gambar diklik... validURL.click(function() { // Tampilkan overlay $('#overlay').show(); // Set nilai atribut src pada gambar besar menjadi nilai atribut href dari tautan yang diklik $('img#large').attr('src', this.href); // Sisipkan nilai atribut title pada elemen #imgCap dengan .html()$('#imgCap').html(this.title); return false; }); // Tampilkan gambar besar dengan dampak .fadeIn() dikala telah termuat $('img#large').load(function() { $(this).fadeIn(); }); // Hilangkan gambar dan overlay dikala overlay diklik $('#overlay').click(function() { $(this).hide(); $('img#large').removeAttr('src').fadeOut(); });Setidaknya hingga di sini aplikasi lightbox sederhana kita sudah selesai. Setelah ini, beberapa perbaikan menyerupai memposisikan gambar di tengah, memastikan bahwa ukuran tabir sanggup menutupi seluruh layar, itu semua sanggup dilakukan dengan kombinasi CSS dan jQuery .css() untuk mengeset ukuran tabir selebar jendela dan setinggi halaman:
$('#overlay').css({ 'width':$(window).width(), 'height':$(document).height() });Ini ialah versi yang sudah selesai dan sanggup digunakan:
CSS
/* Lightbox */ #imgOverlay { position:absolute; top:0px; right:0px; bottom:0px; left:0px; z-index:9997; background-color:black; opacity:0.8; display:none; } #closeLightbox { display:block; font:bold 14px Arial,Sans-Serif; color:white; text-decoration:none; position:absolute; top:20px; right:26px; z-index:9999; display:none; } #imgWrapper { position:absolute; top:70px; right:0px; left:0px; text-align:center; z-index:9999; } img#imgShow { margin:0px auto 70px; display:none; } img#lightboxLoader { display:block; margin:30px auto 0px; } #imgCap { position:absolute; top:10px; left:15px; color:white; z-index:9999; }jQuery
$('body') // Set scroll kafe sumbu-Y menjadi scroll untuk menghindari dampak loncatan yang buruk .css('overflow-y', 'scroll') // Sisipkan semua elemen lightbox yang dibutuhkan .append('<div id="imgOverlay"></div><div id="imgWrapper"></div><a href="#" id="closeLightbox" title="Konsep jQuery Lightbox">×</a>'); // Set lebar overlay selebar jendela, dan tinggi overlay setinggi halaman $('#imgOverlay').css({ 'width':$(window).width(), 'height':$(document).height() }); // Saat tautan yang mengandung thumbnail diklik... $('a:has(img)').click(function() { // Tampilkan overlay, pembungkus gambar dan tombol tutup $('#imgOverlay, #imgWrapper, #closeLightbox').show(); // Sisipkan gambar pada elemen #imgWrapper dengan nilai src berupa nilai href dari tautan yang diklik // dan set nilai atribut alt gambar dari atribut title tautan yang diklik $('#imgWrapper').append('<img id="imgShow" src="' + this.href + '" alt=" ialah teknik JavaScript yang dipakai untuk menampilkan gambar besar dengan memakai Konsep jQuery Lightbox" />'); // Sisipkan kontainer judul gambar dengan teks "Loading..." sebagai awalan $('body').append('<div id="imgCap">Loading...</div>'); // Saat gambar besar telah selesai termuat... $('img#imgShow').load(function() { // tampilkan dengan dampak .fadeIn() $(this).fadeIn(600); // Ubah teks "Loading..." menjadi judul gambar (nilai atribut alt pada gambar besar) $('#imgCap').html(this.alt); }); return false; }); // Saat tombol tutup diklik... $('a#closeLightbox').click(function() { // Hilangkan diri sendiri $(this).hide(); // Singkirkan gambar dan kontainer judul sisipan $('img#imgShow, #imgCap').remove(); // Hilangkan overlay dan pembungkus gambar dengan dampak .fadeOut() $('#imgOverlay, #imgWrapper').fadeOut(); return false; });Tambahan
Blogger mempunyai kemudahan lightbox mereka sendiri. Untuk menerapkan ini, lebih baik nonaktifkan terlebih dahulu fitur lightbox dengan cara masuk ke dasbor/panel kontrol. Pilih Setelan ⇒ Pos dan Komentar. Pada pilihan "Tampilkan gambar dengan Lightbox?" pilih "Tidak":
Klik Simpan Pengaturan.
Gambar: Happy - Fairy Tail
Sumber https://www.dte.web.id/