Contoh

Cara Penggunaan:

Bagian 1 - Setup

Lightbox v2.0 menggunakan Prototype Framework dan Scriptaculous Effects Library. Anda akan perlu untuk memasukkan ketiga Javascript file di header.

<script type="text/javascript" src="/js/prototype.js"></script>
<script type="text/javascript" src="/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="/js/lightbox.js"></script>

Sertakan file CSS Lightbox (atau append stylesheet aktif Anda dengan Lightbox styles).

<link rel="stylesheet" href="/css/lightbox.css" type="text/css" media="screen" />

Periksa CSS dan pastikan direferensikan prevlabel.gif dan nextlabel.gif file berada di lokasi yang tepat. Juga, pastikan loading.gif dan closelabel.gif file sebagai referensi di dekat bagian atas file lightbox.js berada di lokasi yang tepat.

Bagian 2 - Aktifkan

Tambahkan a rel="lightbox" atribut untuk setiap link tag untuk mengaktifkan lightbox. Contoh:

<a href="/images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

Opsional: Gunakan atribut judul jika anda ingin menampilkan keterangan. Jika Anda memiliki satu set gambar terkait yang Anda ingin grup, ikuti langkah satu tapi tambahan termasuk nama grup antara tanda kurung siku dalam atribut rel. Contoh:

<a href="/images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="/images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="/images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>

Tidak ada batasan jumlah gambar set per halaman atau berapa banyak gambar yang diperbolehkan dalam setiap rangkaian. Selamat mencoba!


Sumber : www.lokeshdhakar.com