Menampilkan detail gambar dengan jQuery LightBox

menggunakan jquery lightbox

jQuery LightBox adalah salah satu plugin yang digunakan untuk menampilkan detail gambar pada tengah-tengah layar browser. Plugint ini bersifat opensource sehingga dapat dikembangkan dan digunakan secara gratis. Pada artikel ini saya akan berbagi tentang langkah-langkah menggunakan jQuery LightBox.

Untuk lebih jelas fungsi dari jQuery LightBox, silahkan klik gambar-gambar berikut ini :

Contoh jquery lightbox Contoh jquery lightbox

Jadi dengan jquery lighbox gambar ditampilkan secara detail seukuran gambar aslinya. Penggunaan jquery lighbox bisa bermacam-macam, misal untuk galleri photo, photo personal atau untuk photo-photo yang dipasang dalam halaman web.

Cara penggunaan jQuery Lightbox

Download plugin jQuery Lightbox di website leandrovieira.com ukuran filenya sekitar 162KB, saya download terakhir versi 0.5

Kemudian anda ektrak dengan nama folder jquery-lightbox. Dalam file tersebut ada beberapa folder seperti pada gambar berikut :

folder jquery lightbox

yang kita perlukan adalah isi folder css, isi folder images dan folder js, sedangkan folder photos dan file index adalah contoh bawaan sebagai demo hasilnya (ini juga bisa membantu anda memahami contoh penggunaanya)

Jika ingin menyisipkanya pada halaman web anda  berarti anda harus mengambil folder-folder yang diperlukan tersebut. Kemudian menambahkan baris-baris perintah berikut :

Letakkan pada bagian <head>...</head>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
<script type="text/javascript">
    $(function() {
        $('#lighbox-photo a').lightBox();
    });
</script>
<style type="text/css">
#lighbox-photo { text-align:center; }
#lighbox-photo img { border:10px solid #ccc; margin:10px;}
</style>

Bagian baris #lighbox-photo a, menunjukkan bahwa semua gambar/photo yang akan digunakan diletakkan dalam sebuah elemen div dengan id="lighbox-photo", dan a, artinya lighbox akan muncul pada saat link gambar diklik

Setelah kode diatas ditambahkan, berarti tinggal menyisipkan gambarnya, caranya :

<div id="lighbox-photo">
    <a href="photos/img1.jpg"><img src="photos/img1.jpg" width="200" height="200" alt="" /></a>
    <a href="photos/img2.jpg"><img src="photos/img2.jpg" width="200" height="200" alt=""/></a>
    <a href="photos/img3.jpg"><img src="photos/img3.jpg" width="200" height="200" alt="" /></a>
</div>

Ada beberapa cara lain jika kasus cara memasukkan gambarnya berbeda dengan diatas, misal gambar yang dihubungkan dengan lighbox hanya dengan class tertentu. Jika seperti itu anda harus merubah bagian #lightbox-photo a menjadi :

<script type="text/javascript">
$(function() {
  $('a[@rel*=lightbox]').lightBox(); // yang dihubungkan hanya link dengan rel=lightBox
  // atau
  $('a.lightbox').lightBox(); // link dengan class lightbox
  // atau
  $('a').lightBox(); // Select all links in the page
});
</script>

Jika anda menggunakan cara lain berarti link gambar disesuaikan, contoh :

<a href="photos/img1.jpg" class="lighbox"><img src="photos/img1.jpg" width="200" height="200" alt="" /></a>

atau

<a href="photos/img1.jpg" rel="lighbox"><img src="photos/img1.jpg" width="200" height="200" alt="" /></a>

Demonya bisa dilihat disini

Selamat mencoba, jika ada pertanyaan silahkan dimasukkan komentar.

Zainal Hakim

** Bebas disunting dengan menyebutkan sumber **

Komentar

Halaman Lainya

  • Apa yang dapat dilakukan jquery
    Apa yang dapat dilakukan dengan jQuery?? mungkin anda sudah sering mendengar nama jquery disebut sebut dalam teknologi web sekarang. Begitu tenarnya nama tersebut sehingga hampir semua pengembang web menggunakannya. Berikut ini hal-hal yang dapat dilakukan jquery.
  • Membuat Menu melayang tetap diatas (Sticky Navigation Menu)
    Kali ini saya akan berbagi tentang membuat menu melayang diatas diatas halaman atau istilah kerenya Sticky Navigation Menu. Sticky navigation menu ini akan bekerja pada sebuah halaman web yang tingginya melebihi ukuran layar/screen dan halaman tersebut discroll ke bawah. Model menu ini dibuat dengan menggabungkan jquery dan css. Silahkan simak tulisan berikut ini.

Kiriman terbaru