Demo & Tutorial Lightbox Slideshow : Cara Membuat Lightbox Slideshow di blogger

Jika selama ini kita selalu terpancang untuk menggunakan jQuery untuk membangun desain blog dengan segala pernak-perniknya, kini cakrawala coba kita kembangkan dengan mencoba beberapa desain menarik image preview (lightbox) dari prototype.js dan scriptaculous.js. Setelah pada posting sebelumnya kita buat sebuah lightbox cantik, kini satu lagi lightbox yang sudah dilengkapi dengan slideshow bisa menjadi pilihan alternatif bagi anda. Prototype-1.6.0.2.js dan scripttaculous.1.8.1.js mampu memberikan suguhan menarik dalam sebuah bentuk lightbox slideshow.

D E M O

Silahkan klik pada salah satu thumbnail dan tunggu beberapa saat. Ketika image dengan ukuran yang jauh lebih besar terlihat, maka secara otomatis slideshow akan bekerja dan demi satu image (berukuran besar) ditampilkan di halaman blog sesuai dengan banyaknya thumnail. Untuk menghentikan slideshow silahkan klik "Stop Slideshow" dan klik "Start Slideshow" untuk mengaktifkan kembali slideshow. Jika ingin mengoperasikan secara manual klik "Stop Slideshow", kemudian gunakan fungsi "Nex" dan "Previous".

Kode CSS dan Javascript

<link rel="stylesheet" href="https://sites.google.com/site/lightboxgubhugreyot/proto-culous/02-lightbox-slideshow/GR_lightbox-slideshow.css" type="text/css" media="screen" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.1/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="http://lightbox-slideshow.googlecode.com/files/gubhugreyot_lightbox-slideshow-1.2.js"></script>

Kode Dasar Lightbox (Posting)

<div class="mygallery">
<a href="image-1.jpg" rel="grsslightbox[gallery-1]" title="Tuliskan caption lightbox di sini!"><img src="thumbnail-1.jpg" width="120" height="90" /></a>
<a href="image-2.jpg" rel="grsslightbox[gallery-1]" title="Tuliskan caption lightbox di sini!"><img src="thumbnail-2.jpg" width="120" height="90" /></a>
<a href="image-3.jpg" rel="grsslightbox[gallery-1]" title="Tuliskan caption lightbox di sini!"><img src="thumbnail-3.jpg" width="120" height="90" /></a>
<a href="image-4.jpg" rel="grsslightbox[gallery-1]" title="Tuliskan caption lightbox di sini!"><img src="thumbnail-4.jpg" width="120" height="90" /></a>
</div>

Contoh Kode Lightbox berikut image & thumbnail

<div style="float:left;padding:0 0 10px 10px;margin:20px 0;border:2px solid #555;">
<a href="https://sites.google.com/site/gubhugreyotbaru/lightbox-slideshow/img_gubhugreyot-bali-dance.jpg" rel="grsslightbox[gallery-1]" title="Si cantik dan tari Bali!"><img src="https://sites.google.com/site/gubhugreyotbaru/lightbox-slideshow/th_gubhugreyot-bali-dance.jpg" width="120" height="90" style="margin:10px 10px 0 0;padding:4px;border:1px solid #888;background:#ddd;" /></a>
<a href="https://sites.google.com/site/gubhugreyotbaru/lightbox-slideshow/img_gubhugreyot-bridge-bw01.jpg" rel="grsslightbox[gallery-1]" title="Jembatan asli produk dalam negeri. Ditanggung cepat ambrol!"><img src="https://sites.google.com/site/gubhugreyotbaru/lightbox-slideshow/th_gubhugreyot-bridge-bw01.jpg" width="120" height="90" style="margin:10px 10px 0 0;padding:4px;border:1px solid #888;background:#ddd;" /></a>
<a href="https://sites.google.com/site/gubhugreyotbaru/lightbox-slideshow/img_gubhugreyot-red-flower.jpg" rel="grsslightbox[gallery-1]" title="Bungaku, bungamu, bunga .... trotoar ... yang liar ... liar (Iwan Fals)"><img src="https://sites.google.com/site/gubhugreyotbaru/lightbox-slideshow/th_gubhugreyot-red-flower.jpg" width="120" height="90" style="margin:10px 10px 0 0;padding:4px;border:1px solid #888;background:#ddd;" /></a>
<a href="https://sites.google.com/site/gubhugreyotbaru/lightbox-slideshow/img_gubhugreyot-night-01.jpg" rel="grsslightbox[gallery-1]" title="Malam menaljubkan di tepi pantai!"><img src="https://sites.google.com/site/gubhugreyotbaru/lightbox-slideshow/th_gubhugreyot-night-01.jpg" width="120" height="90" style="margin:10px 10px 0 0;padding:4px;border:1px solid #888;background:#ddd;" /></a>
</div>

Cara Membuat Lightbox Slideshow

1. Simpan link kode css dan javascript di atas kode </head>.
2. Untuk menampilkan caption tuliskan teks melalui title="Tuliskan caption di sini!". Title dalam tag a akan ditampilkan sebagai caption lightbox.
3. Gunakan image (gambar berukuran besar) dan thumbnail (gambar berukuran kecil).
4. Jika lightbox tak dapat berfungsi dengan sempurna, download kode css dan simpan di atas kode ]]></b:skin>, dengan bentuk sebagai contoh di bawah.
5. Anda bisa mengikuti tutorial lengkapnya dengan klik link di bawah ini:
   Tutorial Lengkap Lightbox Slideshow
   
6. Jika anda menggunakan lightbox untuk posting image gallery, buatlah seluruh kode gallery dalam bentuk deret tanpa putus.

Menyimpan Kode css di atas kode ]]></b:skin>

#lightbox{position:absolute;top:20px;left:0;width:100%;z-index:100;text-align:center;line-height:0;color:#151410;}
#lightbox a, #lightbox a:hover{border-bottom:none;color:#151410;text-decoration:underline;}
#lightbox a img{border:none;}
#outerImageContainer{position:relative;background-color:#fff;width:250px;height:250px;margin:0 auto;}
#imageContainer{padding:10px;}
#loading{position:absolute;top:32%;left:0%;height:25%;width:100%;text-align:center;line-height:0;}
#loadingLink{display:block;margin:0 auto;padding:0;width:75px;height:75px;background:url("http://lightbox-slideshow.googlecode.com/files/JQ-loadingLightBox.gif") center center no-repeat;text-indent:-9999px;}
.... dst

]]></b:skin>

Kode posting lightbox (deret tanpa putus)

<div style="float:left;padding:0 0 10px 10px;margin:20px 0;border:2px solid #555;"><a href="https://sites.google.com/site/gubhugreyotbaru/lightbox-slideshow/img_gubhugreyot-bali-dance.jpg" rel="grsslightbox[gallery-1]" title="Si cantik dan tari Bali!"><img src="https://sites.google.com/site/gubhugreyotbaru/lightbox-slideshow/th_gubhugreyot-bali-dance.jpg" width="120" height="90" style="margin:10px 10px 0 0;padding:4px;border:1px solid #888;background:#ddd;" /></a><a href="https://sites.google.com/site/gubhugreyotbaru/lightbox-slideshow/img_gubhugreyot-bridge-bw01.jpg" rel="grsslightbox[gallery-1]" title="Jembatan asli produk dalam negeri. Ditanggung cepat ambrol!"><img src="https://sites.google.com/site/gubhugreyotbaru/lightbox-slideshow/th_gubhugreyot-bridge-bw01.jpg" width="120" height="90" style="margin:10px 10px 0 0;padding:4px;border:1px solid #888;background:#ddd;" /></a><a href="https://sites.google.com/site/gubhugreyotbaru/lightbox-slideshow/img_gubhugreyot-red-flower.jpg" rel="grsslightbox[gallery-1]" title="Bungaku, bungamu, bunga .... trotoar ... yang liar ... liar (Iwan Fals)"><img src="https://sites.google.com/site/gubhugreyotbaru/lightbox-slideshow/th_gubhugreyot-red-flower.jpg" width="120" height="90" style="margin:10px 10px 0 0;padding:4px;border:1px solid #888;background:#ddd;" /></a><a href="https://sites.google.com/site/gubhugreyotbaru/lightbox-slideshow/img_gubhugreyot-night-01.jpg" rel="grsslightbox[gallery-1]" title="Malam menaljubkan di tepi pantai!"><img src="https://sites.google.com/site/gubhugreyotbaru/lightbox-slideshow/th_gubhugreyot-night-01.jpg" width="120" height="90" style="margin:10px 10px 0 0;padding:4px;border:1px solid #888;background:#ddd;" /></a></div>

Sumber:

- http://www.justinbarkhuff.com