Lightbox adalah sebuah script sederhana, yang digunakan untuk menampilkan preview tanpa meninggalkan halaman utama, script ini bisa bekerja di semua browser modern. Dengan script ini.
Lightbox Script ini sangat cocok digunakan untuk blog yang sering menampilkan foto atau image dalam blognya. trus apa saja saya kelebihan dari script ini...
* Image Sets: bisa digunakan untuk grup terkait foto dan menavigasi melalui mereka dengan mudah
* Efek Visual: transisi
* Backwards Kompatibilitas: yes!
 |  |
| |  |  |
Bagian 1 - Cara pasang script
1. Lightbox 2 menggunakan prototipe Framework dan Scriptaculous Efek Perpustakaan. Anda harus menyertakan tiga Javascript file di header
2.Termasuk Lightbox CSS file (atau anda menambahkan stylesheet aktif dengan Lightbox styles).
3.Pemeriksa CSS dan memastikan gambar "prev.gif" dan "next.gif" file berada di lokasi yang tepat. Juga, pastikan "loading.gif" dan "close.gif" file sebagai referensi di dekat bagian atas lightbox.js file yang tepat berada di lokasi.
Copy paste code di bawah ini diatas ]]></b:skin>
<script src='http://h1.ripway.com/kriep2/lightbox2/prototype.js' type='text/javascript'/>
<script src='http://h1.ripway.com/kriep2/lightbox2/scriptaculous.js?load=effects,builder' type='text/javascript'/>
<script src='http://h1.ripway.com/kriep2/lightbox2/lightbox2.js' type='text/javascript'/>
<link href='http://h1.ripway.com/kriep2/lightbox2/lightbox.css' media='screen' rel='stylesheet' type='text/css'/>
<script src='http://h1.ripway.com/kriep2/lightbox2/scriptaculous.js?load=effects,builder' type='text/javascript'/>
<script src='http://h1.ripway.com/kriep2/lightbox2/lightbox2.js' type='text/javascript'/>
<link href='http://h1.ripway.com/kriep2/lightbox2/lightbox.css' media='screen' rel='stylesheet' type='text/css'/>
Cara menggunakan pada postingan:
1.Untuk yang eceran alias foto per foto yaitu dengan menambahkan rel="lightbox" untuk attribute link tag yang mengaktifkan lightbox. Sebagai contoh:
<a href="http://URL_FOTO_ANDA" target="_blank" title="I'LL Be Back.." rel="lightbox">
<img src="http://URL_FOTO_ANDA" alt="image name" height="50" width="50" /></a>
<img src="http://URL_FOTO_ANDA" alt="image name" height="50" width="50" /></a>
2. Untuk yang berjama'ah alias rombongan rel="lightbox[roadtrip]"
sebagai contoh :
<table>
<caption><b>Contoh Gallery</b></caption><tbody>
<tr><td>
<a href="http://URL_FOTO_ANDA" target="_blank" title="Hallo How are u" rel="lightbox[roadtrip]">
<img src="http://URL_FOTO_ANDA" alt="image name" height="50" width="50" /></a>
</td>
<td>
<a href="http://URL_FOTO_ANDA" target="_blank" title="Huahahahah...." rel="lightbox[roadtrip]">
<img src="http://URL_FOTO_ANDA" alt="image name" height="50" width="50" /></a>
</td>
<td>
<a href="http://URL_FOTO_ANDA" target="_blank" title="ALLAHU AKBAR" rel="lightbox[roadtrip]">
<img src="http://URL_FOTO_ANDA" alt="image name" height="50" width="50" /></a>
</td>
<td>
<a href="http://URL_FOTO_ANDA" target="_blank" title="I'LL Be Back.." rel="lightbox[roadtrip]">
<img src="http://URL_FOTO_ANDA" alt="image name" height="50" width="50" /></a>
</td></tr></table>
<caption><b>Contoh Gallery</b></caption><tbody>
<tr><td>
<a href="http://URL_FOTO_ANDA" target="_blank" title="Hallo How are u" rel="lightbox[roadtrip]">
<img src="http://URL_FOTO_ANDA" alt="image name" height="50" width="50" /></a>
</td>
<td>
<a href="http://URL_FOTO_ANDA" target="_blank" title="Huahahahah...." rel="lightbox[roadtrip]">
<img src="http://URL_FOTO_ANDA" alt="image name" height="50" width="50" /></a>
</td>
<td>
<a href="http://URL_FOTO_ANDA" target="_blank" title="ALLAHU AKBAR" rel="lightbox[roadtrip]">
<img src="http://URL_FOTO_ANDA" alt="image name" height="50" width="50" /></a>
</td>
<td>
<a href="http://URL_FOTO_ANDA" target="_blank" title="I'LL Be Back.." rel="lightbox[roadtrip]">
<img src="http://URL_FOTO_ANDA" alt="image name" height="50" width="50" /></a>
</td></tr></table>
hurrfh...akhirnya slesai sudah, gmn gampang khan...selamat mencoba..
Baca Juga Artikel menarik di bawah ini :
3 comments to "Membuat Foto Preview dg lightbox"
narti says:
artikelnya bagus, bermanfaat...
tapi udah pusing duluan edit HTML nih...
makasih sharingnya.
Informasi Bersama says:
Wah pusing nih pak, br dibaca lom dipraktekkanya...
sifa says:
infonya bagus mas, tp bener jug kata sobat narti dan informasi dh pusing duluan, sebelum di praktekin he...