Lightbox Slideshow dengan prototype.js dan scriptaculous.js

Sekalipun lightbox ini sama seperti yang telah terpostingkan sebelumnya, namun satu nilai lebih dari lightbox slideshow ini adalah telah dengan ditambahkannya sebuah fungsi slideshow di dalamnya. Ketika sebuah gallery diaktifkan dengan membuka (klik) salah satu thumbnail maka secara otomatis slideshow akan bekerja. Untuk menghentikan slideshow cukup dengan meng-klik button text yang bertuliskan stop slideshow. Untuk menggunakan lightbox slideshow sampeyan harus upload javascript dan css lightbox-slideshow ke file hosting. Agar lebih praktis dan mudah lakukan saja di Google Sites. Tentang bagaimana cara melakukannya, silahkan bula link di bawah ini:

Panduan cara menyimpan file di Google Sites

Jika deno -1 tidak bekerja silahkan buka demo - 2

D E M O - 1

D E M O - 2

D E M O - Blogger

Cara Membuat Lightbox Slideshow

Karena cara membuat lightbox slideshow tak berbeda dengan lightbox sebelumnya, maka silahkan sampeyan buka tutorialnya dengan klik di sini

Catatan/Keterangan:

• Gunakan javascript dan kode CSS yang disertakan di bawah ini!
• Sebaiknya gunakan image dengan ukuran lebar di bawah 900px dan tinggi dibawah 500px karena image hanya akan ditampilkan dengan ukuran terbatas.
• Untuk thumbnail sampeyan dapat gunakan ukuran dibawah 250px (width) karena thumbnail yang terlalu besar akan memperlambat loading blog. Thimbail yang terlalu besar juga tak akan bermanfaat karena image (gambar) sebenarnya yang berukuran besar akan dipreviewkan melalui lightbox.
• Dengan menggunakan lightbox ataupun lightbox slideshow sebenarnya akan banyak menguntungkan blogger karena tak perlu lagi menampilkan image (gambar) dalam ukuran besar dalam posting yang tentu saja akan semakin memperlancar loading blog.
• Jumlah image dan thumbnail dalam setiap kelompok (gallery) tidak dibatasi, jadi silahkan tampilkan sebanyak sampeyan suka, hanya perlu sebuah pertimbangan agar tidak terlalu membuat beban loading terlalu besar/berat.
• Thumbnail dapat juga diganti dalam bentuk teks
• Ada lima buah background image yang terdapat dalam kode CSS lightbox-slideshow yang harus sampeyan upload di file hosting sebelum upload css.
  
  • http://lightbox-slideshow.googlecode.com/files/JQ-loadingLightBox.gif
  • http://lightbox-slideshow.googlecode.com/files/blank.gif
  • http://lightbox-slideshow.googlecode.com/files/prevlabel.gif
  • http://lightbox-slideshow.googlecode.com/files/nextlabel.gif
  • http://lightbox-slideshow.googlecode.com/files/closelabel.gif
• Upload atau penyimpanan ke-5 background image di atas bisa dilakukan di blogger atau di Google Sites.
• Ganti semua background image dalam kode CSS dengan yang telah diupload kemudian baru lakukan upload kode css di Google Sites.

Link Javascript dan Kode CSS Lightbox-slideshow:

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

Cara menggunakan kode lightbox-slideshow

Single Image

<a href="image.jpg" rel="grsslightbox" title="Tuliskan teks di sini"><img src="thumbnail.jpg" width="200" height="150" /></a>

Image Gallery

<a href="image.jpg" rel="grsslightbox[gallery-1]" title="Tuliskan teks di sini"><img src="thumbnail.jpg" width="200" height="150" /></a>
<a href="image.jpg" rel="grsslightbox[gallery-1]" title="Tuliskan teks di sini"><img src="thumbnail.jpg" width="200" height="150" /></a>
<a href="image.jpg" rel="grsslightbox[gallery-1]" title="Tuliskan teks di sini"><img src="thumbnail.jpg" width="200" height="150" /></a>
<a href="image.jpg" rel="grsslightbox[gallery-1]" title="Tuliskan teks di sini"><img src="thumbnail.jpg" width="200" height="150" /></a>

Test/Percobaan:

Sebagai bahan untuk melakukan percobaan silahkan menggunakan kode berikut:

<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="grsslightbox[album-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="grsslightbox[album-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="grsslightbox[album-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="grsslightbox[album-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:

Jika blog mengalami masalah ketika menggunakan file dari google sites, karena link css menggunakan hosting dari google sites, silahkan download kode cssnya, kemudian copy dan pastekan di atas kode ]]></b:skin> yang terletak di atas kode </head>

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

Update » Jemuah PON, January, 20, 2012

» Happy Blogging - gubhugreyot «