Membuat Galeri Light Box Untuk Berita Foto Blogger Atau Koleksi Foto Pribadi

PERHATIAN!!! ARTIKEL INI SUDAH TIDAK VALID

Bismillah, mudah-mudahan tutorial ini bermanfaat dan berhasil...

Admin yakin kawan blogger sudah pada tahu apa itu light box gallery, atau jika belum tahu, silakah klik salah satu foto di bawah ini:


Nah, itu lah yang dinamakan dengan light box gallery. Bagaimana cara membuatnya? langsung saja:

Pertama:
Copy kode CSSnya dan paste kan di atas kode ]]></b:skin>. Silahkan download kode CSSnya DISINI.

Kedua:
Pastekan kode di bawah ini di atas kode </head>. Kodenya:

<script src='http://yourjavascript.com/131223611310/lightbox.js' type='text/javascript'/> 
<script src='http://yourjavascript.com/441151012521/lightboxscript2.js' type='text/javascript'/>
<script type='text/javascript'> 
    $(function() {
        $(&#39;#gallery a&#39;).lightBox();
    });
    </script>

Ganti alamat javascript berwarna biru dengan javascript lightbox.js untuk kode yang biru download DISINI, untuk yang ungu DISINI. Setelah itu, upload javascript-javascript yang telah anda download di tempat penyimpanan javascript, contohnya di yourjavascript.com. Lihat langkah-langkahnya di bawah ini:

1. Upload javascript kawan, klik choose file dan masukan kode JS yang telah kawan download.



Pilih File JS yang telah kawan download:


2. Masuk ke email kawan, dan ambil link yang telah yourjavascript kirim:



Copy alamatnya (dari http//... sampai .js) dan ganti kode yang berwarna biru tadi (http://yourjavascript.com/131223611310/lightbox.js) dengan alamat yang ini.

Lakukan hal yang sama untuk mengganti kode yang berwarna ungu.

Ketiga:
Copy dan pastekan kode di bawah ini di bawah kode <body>, kodenya:


<script type='text/javascript'> 
$(document).ready(function(){
//menambahkan lightbox pada setiap element a yang memiliki class &#39;lightbox&#39;
$(&#39;a.lightbox&#39;).lightBox({
imageLoading:&#39;https://lh4.googleusercontent.com/-t21rBEh7iRE/UGRI_Rrej8I/AAAAAAAAA9Q/e3mB06zQfqM/s32/lightbox-ico-loading.gif&#39;,
imageBtnPrev:&#39;https://lh4.googleusercontent.com/-ZXsri9T4fEI/UGRI81CEW0I/AAAAAAAAA9I/U4etxgrT2jc/s63/lightbox-btn-prev.gif&#39;,
imageBtnNext:&#39;https://lh5.googleusercontent.com/-XV6bGdKo62g/UGRI6TajvOI/AAAAAAAAA9A/S8f6qjMWzkI/s63/lightbox-btn-next.gif&#39;,
imageBtnClose:&#39;https://lh3.googleusercontent.com/-_kwwq0Mu_s4/UGRI3rlczOI/AAAAAAAAA84/CbzRCFRrMAk/s66/lightbox-btn-close.gif&#39;,
imageBlank:&#39;https://lh6.googleusercontent.com/-lkG4kW7Br3c/UGRI0WiUyHI/AAAAAAAAA8w/GQAEaN6afuQ/s128/lightbox-blank.gif&#39;,
txtImage:&#39;Image&#39;
});
});
</script>

Keempat:
Silahkan buat postingan baru dengan judul misalkan "Wisata Ke Kebun Binatang", kemudian isikan kode di bawah ini pada HTML, bukan compose:


Kodenya:

<div id="gallery">
<ul>
<li> <a class="lightbox" href="alamat foto kawan" title="Deskripsi foto kawan."> <img alt="" height="72" src="Foto kecil atau thumbnail" width="72" /> </a> </li>
<li> <a class="lightbox" href="alamat foto kawan" title="Deskripsi foto kawan."> <img alt="" height="72" src="Foto kecil atau thumbnail" width="72" /> </a> </li>
</ul>
</div>

Jika ingin menambahkan foto, copy dari <li> ke </li>, dan pastekan di atas kode </ul>. Contohnya:
<li> <a class="lightbox" href="alamat foto kawan" title="Deskripsi foto kawan."> <img alt="" height="72" src="Foto kecil atau thumbnail" width="72" /> </a> </li>

Height (panjang), dan Width (lebar) untuk foto kecil bisa disesuaikan dengan keinginan kawan, rubah saja nilainya dari 72 menjadi 100 misalkan. Publish dan lihat hasilnya, mudah-mudahan berhasil.

Comments
1 Comments

1 comments:

  1. oh ini toh yg nmanya light box
    Thanks ya mas :)
    Salam kenal

    ReplyDelete