Demo & Kode Html Lightbox Image Viewer for Blogger

Demo Single Image dan Image Gallery

Lightbox Image Viewer bisa difungsikan pada satu buah image (single image) atau beberapa buah image yang terangkai dalam sebuah gallery (image gallery). Untuk single image kode yang dituliskan cukup rel="GRlightbox", sedangkan untuk image gallery bisa ditambahkan nama gallery yang sesuai dengan kategori galelery. Kode dasar yang digunakan adalah rel="GRlightbox[gallery]". Kategory [gallery] bisa anda rubah untuk lebih disesuaikan dengan kebutuhan, seperti misanya [photo-keluarga], [pasar-malam] atau [rumah-adat].

Demo Single Image

Pada demo Single Image ini akan ditampilkan sebuah image tunggal dengan title yang dibuat secara khusus yang bertujuan agar caption yang ditampilkan dalam lightbox preview memuat sebuah teks link. Silahkan anda klik untuk melihat fungsi dari teks link dalam lightbox preview (teks link=gubhugreyot.blogdetik.com).

xHTML Single Image

<a href="https://sites.google.com/site/lightboxgubhugreyot/proto-culous/02-lightbox-slideshow/demo-images/img_war-horse.jpg" title="War Horse ....&lt;a href=&quot;http:&#47;&#47;gubhugreyot.blogdetik.com&quot; target=&quot;_blank&quot;&gt;gubhugreyot.blogdetik.com&lt;/a&gt;" rel="GRlightbox"><img src="https://sites.google.com/site/lightboxgubhugreyot/proto-culous/02-lightbox-slideshow/demo-images/th_war-horse.jpg" width="180" height="130" style="display:block;text-align:center;margin:15px auto;padding:4px;background:#ddd;border:1px solid #888;box-shadow:0 0 10px #000;" /></a> 

Demo Image Gallery

Gallery yang akan dipreviewkan setiap gambarnya melalui lightbox image viewer for blogger ini menggunakan kode dasar:
rel="GRlightbox[album-1]"
Klik setiap image dalam gallery untuk melihat fungsi lightbox secara keseluruhan.

xHTML Image Gallery

<div align="center" style="display:block;margin:30px auto;text-align:center;width:410px;">
<a href="https://sites.google.com/site/lightboxgubhugreyot/proto-culous/02-lightbox-slideshow/demo-images/img_green-frog.jpg" rel="GRlightbox[gallery-1]" title="Kodok ngorek neng pinggir kali."><img src="https://sites.google.com/site/lightboxgubhugreyot/proto-culous/02-lightbox-slideshow/demo-images/th_green-frog.jpg" width="180" height="130" style="float:left;margin:5px 12px 5px 0;padding:4px;background:#ddd;border:1px solid #888;box-shadow:0 0 10px #000;" /></a><a href="https://sites.google.com/site/lightboxgubhugreyot/proto-culous/02-lightbox-slideshow/demo-images/img_youtube-lord-ofthe-ring.jpg" rel="GRlightbox[gallery-1]" title="The Lord of The Rings"><img src="https://sites.google.com/site/lightboxgubhugreyot/proto-culous/02-lightbox-slideshow/demo-images/th_youtube-lord-ofthe-ring.jpg" width="180" height="130"  style="float:left;margin:5px 12px 5px 0;padding:4px;background:#ddd;border:1px solid #888;box-shadow:0 0 10px #000;" /></a><a href="https://sites.google.com/site/lightboxgubhugreyot/proto-culous/02-lightbox-slideshow/demo-images/img_red-flower.jpg" rel="GRlightbox[gallery-1]" title="Indonesia seharusnya seindah bunga ini! Sayang banyak pejabat jadi maling!"><img src="https://sites.google.com/site/lightboxgubhugreyot/proto-culous/02-lightbox-slideshow/demo-images/th_red-flower.jpg" width="180" height="130" style="float:left;margin:5px 12px 5px 0;padding:4px;background:#ddd;border:1px solid #888;box-shadow:0 0 10px #000;" /></a><a href="https://sites.google.com/site/lightboxgubhugreyot/proto-culous/02-lightbox-slideshow/demo-images/img_war-horse.jpg" title="War Horse ....&lt;a href=&quot;http:&#47;&#47;gubhugreyot.blogdetik.com&quot; target=&quot;_blank&quot;&gt;gubhugreyot.blogdetik.com&lt;/a&gt;" rel="GRlightbox[gallery-1]"><img src="https://sites.google.com/site/lightboxgubhugreyot/proto-culous/02-lightbox-slideshow/demo-images/th_war-horse.jpg" width="180" height="130" style="float:left;margin:5px 12px 5px 0;padding:4px;background:#ddd;border:1px solid #888;box-shadow:0 0 10px #000;" /></a>
</div>

Catatan/Keterangan:

1. Menggunakan lightbox akan memberi keuntungan lebih bagi blogger karena image posting tak perlu lagi ditampilkan secara langsung dalam ukuran besar yang pada akhirnya hanya akan menjadi beban tersendiri bagi blog.
2. Gunakanlah thumbnail berukuran kecil dalam image gallery agar loading blog tetap terjaga dengan baik.
3. Kategori image pada image gallery (dalam 1 (satu) halaman posting) bisa menggunakan nama berbeda (misalnya ada tiga kategori image : rumah-adat, pakaian-adat, upacara-adat).
4. Baca tutorial lengkapnya di gubhugreyot.

Sumber

http://lokeshdhakar.com/