Cara Membuat Jquery Lights Box

By Unknown

Senin, 03 September 2012

Kali saya akan share cara membuat lights box. Lights box merupakan tempat kumpulan gambar seperti gallery. Kelebihan lights box ini bila gambar diklik, maka akan membuat windows view tersendiri, sehingga deretan gambar akan ditampilkan pada frame tersendiri. Widget ini dari Leandro Vieira yang dirilis ulang oleh Spice up your blog. Sekarang mari kita bahas cara membuat Jquery Lights Box. Ikuti langkah berikut.

Log in ke blogger
Klik Template
Masukkan kode berikut di atas kode ]]></b:skin>

#jquery-overlay{position:absolute; top:0; left:0; z-index:90; width:100%; height:500px}
#jquery-lightbox{position:absolute; top:0; left:0; width:100%; z-index:100; text-align:center; line-height:0}
#jquery-lightbox a img{border:none}
#lightbox-container-image-box{position:relative; background-color:#fff; width:250px; height:250px; margin:0 auto}
#lightbox-container-image{padding:10px}
#lightbox-loading{position:absolute; top:40%; left:0%; height:25%; width:100%; text-align:center; line-height:0}
#lightbox-nav{position:absolute; top:0; left:0; height:100%; width:100%; z-index:10}
#lightbox-container-image-box >#lightbox-nav{left:0}
#lightbox-nav a{outline:none}
#lightbox-nav-btnPrev, #lightbox-nav-btnNext{width:49%; height:100%; zoom:1; display:block}
#lightbox-nav-btnPrev{left:0; float:left}
#lightbox-nav-btnNext{right:0; float:right}
#lightbox-container-image-data-box{font:10px Verdana,Helvetica,sans-serif; background-color:#fff; margin:0 auto; line-height:1.4em; overflow:auto; width:100%; padding:0 10px 0}
#lightbox-container-image-data{padding:0 10px; color:#666}
#lightbox-container-image-data #lightbox-image-details{width:70%; float:left; text-align:left}
#lightbox-image-details-caption{font-weight:bold}
#lightbox-image-details-currentNumber{display:block; clear:left; padding-bottom:1.0em}
#lightbox-secNav-btnClose{width:66px; float:right; padding-bottom:0.7em}

Selanjutnya masukkan kode di bawah ini di atas kode </head>

<!--Start lightbox scripts info from http://www.spiceupyourblog.com-->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js' type='text/javascript'/>
<script src='http://suyb.googlecode.com/files/jquery.lightbox-0.5.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(function() {
$(&#39;a.spicebox&#39;) .lightBox({

overlayOpacity: 0.6,
imageLoading: &#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdpMSoUUB_E_Yxdt447dUcVkLfsX6BGazApKncVRJYzzUiNkJvskW-VpposgjSrxYYuR9wp5i0FkDf1jke0MffZhR-lItpIt_2oyvzU0vokreTT-fssjC-jCgIn61HwlgXAtVJplxfbwBS/s1600/lightbox-ico-loading.gif&#39;,
imageBtnClose: &#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitNTtiTuSP0Qn4IlSksa1qNPPpUpTVbpZa2MzITSbiGNYxe07spGQQP13lLScB9oqtL911zWrA4wocUNvCy7ahi1DDjpis1f7Q4LjYqEjW8Vx12Kouud58Zse-cIA9k9O2HUo9jAhqfip4/s1600/lightbox-btn-close.gif&#39;,
imageBtnPrev: &#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVKNxsjgwE3imNQm2P7CbX2R2Q7Y1GqlaEOd8scUy9DfgbtkGcfiHatzA1KUuUYIwNaSMBGeCQReNjDcG9MbKmKKztm-mrrf_8s-f0U59O-nEwOXbeH97eH1JMpOeNvMoHF__fUvICD9Iw/s1600/lightbox-btn-prev.gif&#39;,
imageBtnNext: &#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZOqVGKKvyZlxoI1k0yqDaZhPHiXmQNUaGaIEgXMAGOQ03z2aSOLwqIdK8QFm9kOPsLVqqUbmgVLGnsb06BJ1EHLATaF94pENa6Hvw4VIpXxtIrQbyd_n2R5klNZdr791u4MRXom00Vzyu/s1600/lightbox-btn-next.gif&#39;,
containerResizeSpeed: 350,
txtImage: &#39;Image&#39;,
txtOf: &#39;Of&#39;
});
});
</script>
<!--end lightbox scripts-->

Klik Simpan Template
Tambahkan kode class="spicebox" title="Image Description Here" pada kode gambar anda. Perhatikan contoh kode gambar di bawah ini.

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB2uThVhqq1Mc9RtZy00tRp9nd7I5GDyo2mgEe2GToE-gTVcDPdFzmgO1wE6IIeDAy_6bAKq6SecXgTGDwdWCsl6nZO_4Zx1mfhnbEaVVhU-F8xyb1AGQpl1VZttYXbp_eZC_k-jWl9Jw/s1600/gs2.jpeg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB2uThVhqq1Mc9RtZy00tRp9nd7I5GDyo2mgEe2GToE-gTVcDPdFzmgO1wE6IIeDAy_6bAKq6SecXgTGDwdWCsl6nZO_4Zx1mfhnbEaVVhU-F8xyb1AGQpl1VZttYXbp_eZC_k-jWl9Jw/s1600/gs2.jpeg" /></a></div>

Setelah ditambahkan kode merah dan biru akan menjadi seperi berikut.

<div class="separator" style="clear: both; text-align: center;">
<a class="spicebox" title="Image Description Here" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB2uThVhqq1Mc9RtZy00tRp9nd7I5GDyo2mgEe2GToE-gTVcDPdFzmgO1wE6IIeDAy_6bAKq6SecXgTGDwdWCsl6nZO_4Zx1mfhnbEaVVhU-F8xyb1AGQpl1VZttYXbp_eZC_k-jWl9Jw/s1600/gs2.jpeg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB2uThVhqq1Mc9RtZy00tRp9nd7I5GDyo2mgEe2GToE-gTVcDPdFzmgO1wE6IIeDAy_6bAKq6SecXgTGDwdWCsl6nZO_4Zx1mfhnbEaVVhU-F8xyb1AGQpl1VZttYXbp_eZC_k-jWl9Jw/s1600/gs2.jpeg" /></a></div>

Selanjutnya klik Publikasikan dan lihat hasilnya
Bila ingin membuat pada Laman Baru, ikuti langkah berikut
Klik Laman dan pilih Laman kosong seperti gambar di bawah ini

Nanti anda akan dibawa ke halaman berikutnya. Berikan judul dan uploud gambar, lihat contoh di bawah ini.

jangan dipelototin ya gan

Selanjutnya klik HTML disamping Compose dibagian kiri atas posting area seperti gambar berikut.
Nanti akan didapati kode gambar, selanjutnya tinggal memasukkan kode merah dan biru seperti yang sudah
diterang di atas

Selanjutnya klik Publikasikan
Lalu klik link Laman dan copy alamat link Laman yang ada di address bar seperti berikut dan jadikan link tersendiri seperti di bawah ini.

<a href='http://Alamat link anda/p/judul-laman-anda.html' target='_blank' title='judul yang berkaitan dengan keterangan gambar'>JUDUL LINK</a>

Terakhir klik Simpan dan lihat hasilnya
Selamat mencoba dan sukses selalu

 "keep spirits and do the best"

Share :

Facebook Twitter Google+