Tutorial Lightbox Slideshow : Cara Membuat Lightbox Slideshow di blogger 1

ika 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>