Modif Lightbox Plugins menjadi Lightbox Slideshow

28 Dec 2011

Ini adalah sebuah tips dan trick untuk menambahkan fungsi slideshow pada Widget Lightbox plugin Blogdetik. Dengan tambahan fungsi slideshow maka ketika sebuah image gallery pada lightbox diaktifkan dengan meng-klik salah satu thumbnail-nya, secara otomatis slideshow bekerja dan lightbox Image Viewer akan menampilkan semua image dalam gallery secara bergiliran. Untuk menghentikan dan mengaktifkan fungsi slideshow telah tersedia button text stop-slideshow dan play-slideshow. Sebuah javascript serta CSS baru harus ditambahkan agar lightbox yang sudah sampeyan pakai saat ini (yang baru mau pakai juga bisa) mempunyai fungsi extra slideshow. Silahkan copy javascript berikut CSSnya. Jika dipandang perlu, sebaiknya javascript diupload terlebih dahulu di file hosting agar lebih simple/ringkas saat disimpan di template. Untuk kode CSS letakkan tepat di bawah atau di atas javascript. Simpan ke-2-nya melalui Appearance-Widget-widgetize Any HTML.

DEMO lightbox-slideshow


Jika mungkin sampeyan penasaran dengan apa yang dimaksud debagai lightbox slideshow dan beberapa perbedaan yang ada jika dibandingkan dengan lightbox plugin blogdetik, silahkan klik link demo berikut (jika yang pertama bermasalah silahkan buka demo yang kedua):

Download Javascript lightbox-slideshow

Sebagai langkah awal, silahkan download dan lemudian segera upload difile hosting.
Download javascript

Kode CSS dan Javascript lightbox-slideshow
<style type="text/css" media="screen">
#loadingLink{display:block;margin:0 auto;padding:0;color:transparent;}
#hoverNav a{outline:none;}
#prevLinkImg,#nextLinkImg{width:49%;height:100%;background-image:url(data:image/gif;base64,AAAA);display:block;color:transparent;text-indent:-9999px;}
#prevLinkImg{left:0;float:left;}
#nextLinkImg{right:0;float:right;}
#prevLinkImg:hover,#prevLinkImg:visited:hover{background:url("URL-blogdetik-anda/wp-content/plugins/lightbox/images/prevlabel.gif") left 15% no-repeat;}
#nextLinkImg:hover,#nextLinkImg:visited:hover{background:url("URL-blogdetik-anda/wp-content/plugins/lightbox/images/nextlabel.gif") right 15% no-repeat;}
#imageDataContainer{font:10px Verdana, Helvetica, sans-serif;background-color:#fff;margin:0 auto;line-height:1.4em;}
#imageData{padding:0 10px;}
#imageDetails{width:70%;float:left;text-align:left;}	
#caption{font-weight:normal !important;font-size:11px;color:#333;}
#caption a{color:#930;font-weight:bold;text-decoration:none;}
#numberDisplay{display:block;clear:left;font-weight:bold;}
#detailsNav{display:block;clear:left;padding:0 0 10px 0;width:120%;}	
#closeLink{display:none;}
#prevLinkDetails, #nextLinkDetails, #slideShowControl{margin:0 8px 0 0;font-family:Tahoma, Arial;font-weight:bold;font-size:12px;color:#333;text-decoration:none;}
#prevLinkDetails:hover, #nextLinkDetails:hover, #slideShowControl:hover, #caption a:hover{color:red;text-shadow:1px 1px 1px #000;}	
#nextLinkDetails{margin:0 18px 0 10px;}
#closeLink{display:block;margin:0;padding:0 0 10px 0;text-decoration:none;float:right;width:66px;height:28px;background:url("URL-blogdetik-anda/wp-content/plugins/lightbox/images/closelabel.gif") no-repeat;color:transparent;overflow:hidden;}	
</style>


<script src="GR_lightbox-slideshow-1.2.pack.js" type=""text/javascript"></script>
Keterangan :
  • Lihat pada kode CSS: ganti URL-blog-anda dengan URL blog anda sesungguhnya. Musalnya: http://cewekmatre.blogdetik.com
  • Upload javascript di file hosting seperti misalnya yourjavascript.com
  • Simpan kode css dan javascript melalui widgetize Any HTML. Panduan menggunakan widgetize Any HTML dapat sampeyan klik di sini

Tutorial Lain

Berbagai tutorial dan panduan blogger dan blogDETIK dapat sampeyan buka dengan :

Happy Blogging


TAGS Panduan BlogDETIK Tips dan Trik BloGGeR


-

Author

Follow Me