|| BMCyber || Share For All ||

Cara Membuat Lightbox Slideshow di blogger

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

Anda sedang membaca artikel tentang Cara Membuat Lightbox Slideshow di blogger dan anda bisa menemukan artikel Cara Membuat Lightbox Slideshow di blogger ini dengan url https://bmcyber.blogspot.com/2012/05/cara-membuat-lightbox-slideshow-di.html,anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel Cara Membuat Lightbox Slideshow di blogger ini sangat bermanfaat bagi teman-teman anda,namun jangan lupa untuk meletakkan link Cara Membuat Lightbox Slideshow di blogger sebagai sumbernya.

2 comments:

Ikhbal Gusri said...

boleh juga nih :)

Barqah said...

Hehehe,,,, yah silahkan di Coba ja gan.

Post a Comment