Konsep jQuery Lightbox

Wikipedia - Lightbox, adalah teknik JavaScript yang digunakan untuk menampilkan gambar besar dengan menggunakan modal dialog. Efeknya telah mendapatkan popularitas luas karena gaya yang sederhana namun elegan dan dengan implementasi yang mudah. Pernah berpikir untuk membuatnya sendiri?

Konsepnya sebenarnya sangat sederhana. Kita hanya akan mengirim nilai atribut href dari sebuah tautan menuju atribut src pada gambar saat tautan tersebut diklik:

Dan hal itu bisa dilakukan dengan mudah menggunakan 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;
});

Lihat Demo

Menyaring Tautan 

Namun muncul satu masalah lagi, terutama jika Anda memiliki 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> bisa menjadi tidak layak karena nilainya bukan berupa gambar. Kita tidak ingin mengalami hal seperti ini saat sebuah tautan diklik:

<img src="//api.jquery.com" alt="large" />

Untuk itu kita harus menyaringnya agar tautan yang dikehendaki benar-benar tautan yang mengandung URL gambar, bukan URL halaman lain. Ada beberapa cara. Misalnya, karena kebanyakan lightbox ditampilkan saat sebuah thumbnail diklik, maka kita bisa menggunakan selektor ini:

$('a:has(img)')

Selektor di atas hanya akan menyeleksi semua elemen <a> (tautan) yang memiliki elemen <img> (gambar) di dalamnya. Atau bisa juga menggunakan selektor atribut untuk mendeteksi ekstensi akhir 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 memiliki atribut href dengan nilai akhir .jpg, .png, .gif dan .bmp yang notabene merupakan URL gambar. Atau bisa juga dengan cara biasa: menerapkan kelas tertentu yang spesifik pada tautan gambar seperti ini:

$('a.openLightbox')

Pada intinya apa yang kita lakukan hanyalah mencoba menyaring setiap tautan yang ada agar hal-hal yang tidak kita inginkan tidak terjadi (baca Selektor jQuery)

Kemudian, karena ini adalah lightbox, maka Saya pikir, efek animasi dan tabir/overlay menjadi dua faktor yang penting juga. Katakanlah kita ingin menampilkan tabir saat sebuah tautan gambar diklik dan menganimasikan gambar dengan efek .fadeIn() saat gambar telah selesai dimuat. Maka kita bisa menuliskannya seperti 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 efek .fadeIn() saat telah termuat
$('img#large').load(function() {
    $(this).fadeIn();
});

// Hilangkan gambar dan overlay saat overlay diklik
$('#overlay').click(function() {
    $(this).hide();
    $('img#large').removeAttr('src').fadeOut();
});

Judul Gambar... 

Setelah itu, pertimbangan fitur-fitur lain seperti menyisipkan judul atau deskripsi gambar mungkin juga ingin ditambahkan. Tidak masalah, kita bisa menggunakan atribut lain sebagai bahan penyimpan judul. Misalnya kita akan menyimpan judul gambar pada atribut title dalam tautan seperti lightbox pada umumnya:

<a href="gambar1.jpg" title="Judul Gambar 1">
    <img src="thumbnail1.jpg" alt="thumbnail" />
</a>
<a href="gambar2.jpg" title="Judul Gambar 2">
    <img src="thumbnail2.jpg" alt="thumbnail" />
</a>
<a href="gambar3.jpg" title="Judul Gambar 3">
    <img src="thumbnail3.jpg" alt="thumbnail" />
</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 menggunakan 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 efek .fadeIn() saat telah termuat
$('img#large').load(function() {
    $(this).fadeIn();
});

// Hilangkan gambar dan overlay saat overlay diklik
$('#overlay').click(function() {
    $(this).hide();
    $('img#large').removeAttr('src').fadeOut();
});

Setidaknya sampai di sini aplikasi lightbox sederhana kita sudah selesai. Setelah ini, beberapa perbaikan seperti memposisikan gambar di tengah, memastikan bahwa ukuran tabir dapat menutupi seluruh layar, itu semua bisa 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 adalah versi yang sudah selesai dan bisa 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 bar sumbu-Y menjadi scroll untuk menghindari efek loncatan yang jelek
    .css('overflow-y', 'scroll')
    // Sisipkan semua elemen lightbox yang diperlukan
    .append('<div id="imgOverlay"></div><div id="imgWrapper"></div><a href="#" id="closeLightbox" title="Tutup!">×</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="' + this.title + '" />');
    // 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 efek .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 efek .fadeOut()
    $('#imgOverlay, #imgWrapper').fadeOut();
    return false;
});

Lihat Demo Edit di Sini

Tambahan 

Blogger memiliki fasilitas 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