Pages

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.

Silahkan klik pada salah satu thumbnail di demo 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".

Cara Membuat Lightbox Slideshow
  1. Simpan link kode css dan javascript di atas kode </head> / di bawah code <head> .
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://hanjs.googlecode.com/files/deejayhan_lightbox-slideshow.js"></script>
    2.. Jika lightbox tak dapat berfungsi dengan sempurna, download kode css dan simpan di atas kode ]]></b:skin>, dengan bentuk sebagai contoh di bawah.
 #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;}
#hoverNav{position:absolute;top:0;left:0;height:100%;width:100%;z-index:10;}
#imageContainer>#hoverNav{left:0;}
#hoverNav a{outline:none;}
#prevLinkImg, #nextLinkImg{width:49%;height:100%;background:transparent url("http://lightbox-slideshow.googlecode.com/files/blank.gif") no-repeat; /* Trick IE into showing hover */display:block;text-indent:-9999px;}
#prevLinkImg{left:0; float:left;}
#nextLinkImg{right:0; float:right;}
#prevLinkImg:hover, #prevLinkImg:visited:hover{background:url("http://lightbox-slideshow.googlecode.com/files/prevlabel.gif") left 15% no-repeat;}
#nextLinkImg:hover, #nextLinkImg:visited:hover{background:url("http://lightbox-slideshow.googlecode.com/files/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:bold;}
#numberDisplay{display:block; clear:left;}
#detailsNav{display:block; clear:left; padding:0 0 10px 0;}  
#prevLinkDetails{margin:0 8px 0 0;}      
#nextLinkDetails{margin:0 8px 0 0;}
#closeLink{display:block;margin:0;padding:0 0 10px 0;text-decoration:none;float:right;width:66px;height:28px;background:url("http://lightbox-slideshow.googlecode.com/files/closelabel.gif") no-repeat;text-indent:-9999px;overflow:hidden;}  
#overlay{position:absolute;top:0;left:0;z-index:90;width:100%;height:500px;background-color:#151410;filter:alpha(opacity=60);-moz-opacity:0.6;opacity:0.6;}
.clearfix:after{content:"."; display:block; height:0; clear:both; visibility:hidden;}
* html>body .clearfix{display:inline-block; width:100%;}
* html .clearfix{height:1%;}    
   3. Cara Pembuatan gambarnya copy script / kode di bawah ini ke dalam Posting , Enti Baru , Klik Edit HTML di Entri Edit . Berikut Kode nya :

<div style="float:left;padding:0 0 10px 10px;margin:20px 0;border:2px solid #555;">
<a href="Gambar Thumbail.jpg" rel="grsslightbox[gallery-1]" title="Teks Anda Disini"><img src="URL Gambar Anda" width="120" height="90" style="margin:10px 10px 0 0;padding:4px;border:1px solid #888;background:#ddd;" /></a>
<a href="Gambar Thumbail.jpg" rel="grsslightbox[gallery-1]" title="Teks Anda Disini"><img src="URL Gambar Anda" width="120" height="90" style="margin:10px 10px 0 0;padding:4px;border:1px solid #888;background:#ddd;" /></a>
<a href="Gambar Thumbail.jpg" rel="grsslightbox[gallery-1]" title="Teks Anda Disini><img src="URL Gambar Anda" width="120" height="90" style="margin:10px 10px 0 0;padding:4px;border:1px solid #888;background:#ddd;" /></a>
<a href="Gambar Thumbail.jpg" rel="grsslightbox[gallery-1]" title="Teks Anda Disini"><img src="URL Gambar Anda" width="120" height="90" style="margin:10px 10px 0 0;padding:4px;border:1px solid #888;background:#ddd;" /></a>
</div>
Keterangan :
  1. Yang teks berwarna Kuning adalah gambar thumbailnya untuk di perbesar gambarnya 
  2. Teks yang berwarna Biru Adalah Title / Teks yang ada di gambar . Sesuai Keinginan anda
  3. Teks yang berwarna Merah adalah gambarnya yang di perlihatkan di posting 
Sekian Terimakasih .
Semoga Bermanfaat bagi semuanya 
Description: Cara Membuat Lightbox Slideshow di blogger 
Rating: 4.5 4.5
Labels: , ,