Cara Membuat Jquery Lightbox Evolution pada Blog

Tutorial Mudah Membuat Jquery Lightbox Evolution pada Blog

Motivation - Pada kesempatan ini, saya akan kembali membagikan Tutorial Blog, Yaitu "Cara Membuat Jquery Lightbox Evolution pada Blog". Kegunaan dan fungsi utama pada Lightbox ini, yakni untuk membuka suatu frame yang baru tanpa membuka jendela yang baru.

Bagi Anda yang ingin Membuat Lightbox, silahkan lihat beberapa bentuknya di bawah ini:

1. Login ke Blogger >> Dashboard >> Template >> Edit HTML

Silahkan masukkan jquery di bawah ini, tepat diatas kode </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>

2. Tambahkan lagi CSS Lightbox berikut diatas kode </head>

<link href='http://kang-is.googlecode.com/svn/trunk/css/lightbox.css' rel='stylesheet' type='text/css'/>
<script src='http://kang-is.googlecode.com/svn/trunk/javascript/lbev2.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function(){$('.lightbox').lightbox()});
//]]>
</script>

3. Save (Simpan Template)

Cara Pemakaian

Untuk memakai lightbox evolution ini, anda hanya perlu menambahkan class='lightbox' pada url tujuan. Untuk lebih jelasnya lagi, Silahkan Lihat Cara penggunaannya di bawah ini,

Cara Penggunaan

Gambar Satuan

<a href="url-gambar-besar" class="lightbox"><img src="url-gambar-kecil" alt=""/></a>
<a href="url-gambar-besar" class="lightbox"><img src="url-gambar-kecil" alt=""/></a>
<a href="url-gambar-besar" class="lightbox" title="Untuk menambahkan deskripsi seperti ini, tambah title"><img src="url-gambar-kecil" alt=""/></a>

Untuk menambahkan class='lightbox' pada setiap gambar secara otomatis, simpan kode ini di atas </body>

<script type='text/javascript'>
  jQuery(document).ready(function(){
    $(&#39;a[href$=jpg], a[href$=JPG], a[href$=jpeg], a[href$=JPEG], a[href$=png], a[href$=gif], a[href$=bmp]:has(img)&#39;).lightbox();
  });
</script>

Album Gallery - Banyak Foto

Untuk membuat Gallery, anda hanya perlu menambahkan nama album dengan menggunakan tag rel, contoh rel="nama-album"

<a href="url-gambar-besar" rel="nama-album" class="lightbox"><img src="url-gambar-kecil" alt=""/></a>
<a href="url-gambar-besar" rel="nama-album" class="lightbox"><img src="url-gambar-kecil" alt=""/></a>
<a href="url-gambar-besar" rel="nama-album" class="lightbox" title="Untuk menambahkan deskripsi seperti ini, tambah title"><img src="url-gambar-kecil" alt=""/></a>

Inline Content

Buka LoremIpsum Buka LoremIpsum dengan ukuran tertentu (534x165)

<a class="lightbox" href="#loremipsum">Buka LoremIpsum</a>
<a class="lightbox" href="?lightbox[width]=534&amp;lightbox[height]=165#loremipsum">Buka LoremIpsum dengan ukuran tertentu (534x165)</a>

Youtube

<a href="http://www.youtube.com/watch?v=e1c-wAT0b6g" class="lightbox">YouTube</a>

Flash/SWF - Java

Flash

<a href="http://www.adobe.com/jp/events/cs3_web_edition_tour/swfs/perform.swf" class="lightbox">Flash</a>

IFrame

<a href="https://kang-is.googlecode.com/svn/trunk/converter.html?lightbox[iframe]=true&lightbox[width]=770&lightbox[height]=460" class="lightbox">Buka Iframe</a>
<a class="lightbox" data-options='{"width":450, "height":450, "iframe": true}' href='https://kang-is.googlecode.com/svn/trunk/converter.html' rel='nofollow'>Versi HTML5</a>

Nah, Itulah Sebagian dari cara pemakaian yang paling sering digunakan, Semoga, Tutorial "Cara Membuat Jquery Lightbox Evolution pada Blog" ini dapat bermanfaat, bagi anda. Terima Kasih

Sumber

A Blog Give Motivation