Konsep jQuery Lightbox

Tabel Konten
  1. Menyaring Tautan 
    1. CSS 
    2. jQuery 
  2. Judul Gambar... 
    1. jQuery 
    2. CSS 
    3. jQuery 
  3. Tambahan 
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:

Memindahkan nilai href ke dalam atribut src gambar
Memindahkan nilai href ke dalam atribut src gambar

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":

Menonaktifkan fitur Lightbox
Menonaktifkan fitur Lightbox

Klik Simpan Pengaturan.


Gambar: Happy - Fairy Tail

15 Komentar

  • Putra

    yg lebih menarik + bisa pakai bwt iframe bisa dishare gak mas?? :D
    #udah dari dulu nunggu tutor lightbox dari kangmas, tpi maluu mau minta ^_^

  • Taufik Nurrohman

    @Alam Perwira Sebenarnya sama saja :) Di situ Saya menuliskan bahwa nilai atribut href pada tautan akan masuk ke dalam atribut src pada gambar. Kita bisa mengganti elemen gambar dengan iframe. Dan juga, untuk tipe URL lebih baik diseleksi khusus untuk tautan dengan atribut href bernilai akhir .html seperti ini:

    $('a[href$=".html"]').click(function() {
    $('#imgOverlay, #imgWrapper, #closeLightbox').show();
    $('#imgWrapper').append('<iframe id="frameShow" src="' + this.href + '" width="100%" height="120"></iframe>');
    $('iframe#frameShow').load(function() {
    $(this).fadeIn(600);
    });
    return false;
    });
  • Taufik Nurrohman

    @Alam Perwira Tapi bisa gawat kalau sampai semua tautan dengan akhiran .html terbuka di dalam <iframe>, itu membuat kita tidak bisa membuka halaman pada jendela peramban secara normal. Jadi lebih baik gunakan metode yang terakhir, menggunakan kelas:

    <a class="openFrame" href="sesuatu.html">Link Sesuatu</a>
    $('a.openFrame')
  • Unknown

    konsep ini bertabrakan mas....gmana yah solusinya ...jadi tuh gambar thumbnail yang readmore gambarnya juga ke pop up light box tersebut .. gmana solusinya lightboxnya hanya tampil ..pada gambar di posting saja ^_^ ... terima kasih sebelumnya ..ini dia TKPnya http://www.mading17.asia/

    • Taufik Nurrohman

      Kalau ada kelas khusus pada thumbnail postingnya, tinggal diubah selektornya saja:

      $('img:not(.post-thumbnail)').click(function() {
      // ...
      });
  • Xjoker

    pak bagaimana supaya lightbox nya hanya tampil di halaman tertentu. saya coba pengaruh ke halaman pertama, link gambar popular pos bukan direct link tapi tampil light box :(

    • Taufik Nurrohman

      Tidak perlu difilter berdasarkan halaman. Cukup difilter berdasarkan wilayah saja. Misalnya begini:

      $('.post-body a:has(img)').click(function() {
      ...
      });

      Selektor di atas akan membatatasi penerapan lightbox gambar pada tautan-tautan di dalam area .post-body saja, yang memiliki elemen gambar di dalamnya.

  • Anonim

    mas masih bingung nih gmana cara menggunakan lightbox tersebut untuk menghis pop up window

  • IRIL SAGITA

    Kak, kalau di blog aku begini bagaimana :
    <div class="separator" style="clear: both; text-align: center;"><img border="0" height="500" src="http://4.bp.blogspot.com/-koGM17LcDY4/UfVF0OaK0qI/AAAAAAAAJA8/8k7u_0ocJOA/s500/DLC+Boot+1.2.jpeg" width="500" alt="Master ISO DLC Boot 2013 v1.2 684M"/></div>

    Aku coba begini masih gagal :

    $('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...
    var $separatorImg $('.separator img');
    $separatorImg.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.img + '" 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;
    });
    • Taufik Nurrohman

      var $separatorImg = $('.separator img');
      • IRIL SAGITA

        overly muncul tapi gambarnya gak mau keluar kak ?

        • Taufik Nurrohman

          Oya, jangan menargetkan elemen gambarnya... tapi targetkan elemen tautan yang mengelilinginya:

          var $separatorImg = $('.separator a:has(img)');
  • Unknown

    mas saya mau tambahin satu atribut tapi kok hasilnya undefined ya??

    JQUERY

    $('body').css('overflow-y', 'scroll').append('<div id="imgOverlay"></div><div id="imgWrapper"></div><a href="#" id="closeLightbox" title="Tutup!">×</a>');

    $('#imgOverlay').css({
    'width':$(window).width(),
    'height':$(document).height()
    });

    $('a:has(img)').click(function() {
    $('#imgOverlay, #imgWrapper, #closeLightbox').show();
    $('#imgWrapper').append('<img id="imgShow" src="' + this.href + '" alt="' + this.title + '" data-price="' + this.alt + '"/>');
    $('body').append('<div id="imgCap">Loading...</div><div id="imgPrice">Loading...</div>');

    $('img#imgShow').load(function() {
    $(this).fadeIn(600);
    $('#imgCap').html(this.alt);
    $('#imgPrice').html(this.data-price);
    });
    return false;
    });

    $('a#closeLightbox').click(function() {
    $(this).hide();
    $('img#imgShow, #imgCap, #imgPrice').remove();
    $('#imgOverlay, #imgWrapper').fadeOut();
    return false;
    });

    HTML

    <a href="http://1.bp.blogspot.com/-nbdkpUFwK8U/T4O0nNYb_0I/AAAAAAAACek/hfNCDTzc2M4/s1600/1.jpg" title="Gambar Pertama" alt="IDR 300.000">
    <img src="http://4.bp.blogspot.com/-W-w1TnmRGlY/T4OxvBNIfVI/AAAAAAAACd8/duI1nZNauxI/s1600/1.jpg" alt="thumb" />
    </a>

    • Taufik Nurrohman

      Coba:

      $('#imgPrice').html(this.getAttribute('data-price'));

      atau:

      $('#imgPrice').html($(this).data('price'));

Komentar telah ditutup.