Cara Membuat Lightbox Slideshow di blogger
Assalamualaikum Warohmatullahi Wabarokatuh
Hai Sobat Blogger, Panas-panas gini enaknya emang share ilmu yah?, Oke kali ini saya akan share tentang Cara Membuat Lightbox Slideshow di blogger, materi ini saya dapatkan dari mastah Deejayhan.
Oke Langsung saja,
DEMO
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
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>
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%;}
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>
Sekian Terimakasih .
Semoga Bermanfaat bagi semuanya
2 comments:
boleh juga nih :)
Hehehe,,,, yah silahkan di Coba ja gan.
Post a Comment