Memasang jQuery Lightbox di Blog

jQuery Lightbox adalah salah satu efek pada gambar yang terdapat pada blog. Jika kita klik sebuah gambar pada blog, kita akan dibawa menuju tab baru kemudian gambar baru akan terlihat membesar.
Dewa Teknik
jQuery Lightbox

Untuk membuat sebuah efek pada gambar tentunya kita membutuhkan sebuah jQuery sebagai pendukung agar efek dapat berjalan. jQuery Lightbox adalah salah satu efek pada gambar yang terdapat pada blog. Jika kita klik sebuah gambar pada blog, kita akan dibawa menuju tab baru kemudian gambar baru akan terlihat membesar. Dengan efek jQuery Lightbox ini, gambar akan memiliki efek perbesaran tanpa membuat tab baru pada browser. Sehingga para pengunjung dapat melanjutkan untuk membaca sebuah artikel. Sebenarnya ada beberapa efek jQuery yang dapat diterapkan untuk gambar pada blog. Diantaranya jQuery Pirobox, jQuery Fancybox, dan yang terakhir Lightbox. Disini saya akan mengulas tentang jQuery Lightbox saja, karena menurut saya hanya jQuery inilah yang sangat mudah pemasangannya dan menarik untuk dilihat. Berikut langkah-langkah untuk membuatnya:
  1. Login ke akun blogger sobat. Jika belum login klik tautan berikut: Login Page.
  2. Pada menu Dashboard, Pilih Template --> Edit HTML.
  3. Cari kode </head> dengan cara 
    Ctrl
    +
    F
    .
  4. Kemuadian salin kode dibwah ini tepat dibawahnya.
    5.  <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<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>

    Jika sobat sudah memasang jQuery dengan versi terbaru atau  sebaliknya, ganti dengan versi 1.7.2. Dikarenakan versi terbaru tidak support untuk Lightbox ini
  5. Simpan Template
Cara Penggunaan
Untuk cara penggunaan, sobat cukup menambahkan class='lightbox'  pada link tujuan. Untuk penggunaan pada media, berikut ini tutorialnya:

Inline Content


Lorem ipsum - dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam.

Buka LoremIpsum | Buka LoremIpsum dengan ukuran tertentu (500x200)

 <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>

Gambar Satuan


lightbox lightbox lightbox

<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 membuat semua gambar yang ada di blog menggunakan jQuery Lightbox tambahkan kode berikut diatas kode </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




<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>

Youtube


youtube

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

Flash/SWF


flash

<a href="https://code.google.com/p/bacilsoft/source/browse/col.swf" class="lightbox">Flash</a>

Iframe


Buka Iframe | Versi HTML5
 <a href="https://bacilsoft.googlecode.com/svn/trunk/facebook-fanspage.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://bacilsoft.googlecode.com/svn/trunk/facebook-fanspage.html' rel='nofollow'>Versi HTML5</a>

Sekian dulu ulasan dari saya :)
Dewa Teknik