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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcoAyc-3EZwcXUpMLJJXq6yGrFvvnFX4OmaDSzro4PTwWecIcTkb3ShTh31aXuCgzqlZoFDGakwvzesNl01KdJsm3xeOycKjgJOJko75dYbcR8UihkiFLFoiQNvEI9ceqSo_Fp7tqlhlc/s32/lightbox-ico-loading.gif&#39;,
imageBtnPrev:&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcC-MMhmo8Xu-BENr84pAqRTf10lfipCe9J5bir6eldsveaskQ0IIpaJTef9YSXy6PHrCc4lc8-2tOuAxsqxsyH6tCpj63pXOMxXyGrtTaZ4gw5OOaR4nUdUnbAacHdwbslNIWG3rjGC4/s63/lightbox-btn-prev.gif&#39;,
imageBtnNext:&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjPx05wA2deRrpKZyGcaEppu17YZj6EwFBCTYxoawaQDDLRSmBKbSjvC-L7zvPw0Yi_jReSy4L94TMc8yi1maRNTDcqLdO26NUQ5ArjBFuoocqFlxU6JgHAL6JKiZeO_06TPN_k3-qJEY/s63/lightbox-btn-next.gif&#39;,
imageBtnClose:&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7AureIXZTzro9U9vWXWS1GWJ2G50UU2DsAKk3Y_E97VkUJg5f6SJhvqVSn5rDyKiB12TBI9cN9ECx-RqRDfTMvtHqkUaPwEw_CpHcjcItB4SinODnGlGMyFVFcG3Y3SoR155XzPfv_0A/s66/lightbox-btn-close.gif&#39;,
imageBlank:&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDJMO6uEz1s8cY_2O47WE9CcmBEsL-8hUouayjiAhmJTNok2BbHrV7gRTOW4D8EIENer5XE5HjzSPUplbmahEKt6ZOz9fV0A5nNZv6bBbX5ihfCHZfp0e_2AtLzz8Kha3rIQvEKjRdHyw/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