Membuat Foto Preview dg lightbox


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!



Contoh Preview


image name



image name








Contoh Untuk Foto set


image name



image name



image name



image name







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'/>



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>


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>



:ctar:hurrfh...akhirnya slesai sudah, gmn gampang khan...selamat mencoba..



Baca Juga Artikel menarik di bawah ini :

3 comments to "Membuat Foto Preview dg lightbox"

Post a Comment

Donasi buat KotaTahuku

Merasa Blog ini bermanfaat ? Dukung blog ini dengan sedikit donasi dari anda..

Mungkin Yang Anda Cari

Avail Bisnis

Obrolan Santai


RecycleBlog