Meskipun ada berbagai macam cara membuat lightbox dengan berbagai javascript seperti halnya menggunakan mootool dan prototype.js, namun kita akan utamakan terlebih dahulu cara pembuatan lightbox image viewer menggunakan jquery-1.3.2.js atau jquery.1.3.2.min.js. Tujuannya tak lain adalah sebagai upaya untuk memaksimalkan fungsi jquery-1.3.2.js. Gambaran sederhana tentang light box adalah, saat kita KLIK sebuah image atau thumbnail di halaman blog, maka akan terlihat preview image dalam ukuran yang jauh lebih besar yang ditampilkan seperti layaknya pada sebuah window baru di halaman blog dengan disertai efek layar gelap (transparency effects). Beberapa controll disertakan di dalamnya seperti next, previous dan close. Beberapa lighbox yang lain bahkan menggunakan contoll baru yang berfungsi untuk mengontol fungsi slideshow yang sekaligus disertakan.Supaya mudah untuk di aplikasikan oleh semua blogger, jquery LightBox ini akan kita buat dalam bentuk "paket langsung tempel" dengan penggunaan kode HTML posting teramat sederhana sehingga siapaun dengan mudah mampu menggunakan dan menciptakan sebuah blog yang luar biasa atraktif. Semua kode telah terupload di file hosting dan dalam bentuk link siap pakai. Silahkan pasang dan simpan di template di bawah kode <head> atau di atas kode </head> kemudian segera coba di ruang posting, terbitkan, buka blog dan nikmati cantiknya tampilan Jquery LightBox.
Cara membuat JQuery LightBox
- Login ke Blogger.
- Halaman Dasbor (Dasboard).
- Klik Rancangan (Design).
- Klik Edit HTML.
- Cari kode <head>. Gunakan Ctrl + F untuk mempermudah pencarian.
- Copy dan paste-kan seluruh kode css dan javascript di bawah kode <head> atau di atas kode </head>.
- Klik Simpan Template (Save Template).
- Segera coba dengan melakukan posting untuk melihat hasilnya.
Link kode CSS dan Javascript jQuery Lightbox Image Preview.
Sekalipun semua kode dalam bentuk siap paka miliki, untuk pemakian permanen di blog anda sebaiknya seluruh kode css dan javascript (kecuali jQuery) sebaiknya anda upload difile hosting yang bisa digunakan secara pribadi. Cara seperti ini perlu dilakukan agar bandwidth tetap terkendali hingga fungsi lightbox dan loadingnya selalu dalam kondisi maksimal. Kode CSS dan Javascript Lightbox:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="https://sites.google.com/site/gubhugreyotprojects/juli-2010/javascript/GR_jQlightbox01.js" type="text/javascript"></script>
<link href="https://sites.google.com/site/gubhugreyotprojects/juli-2010/css/GR_jQlightbox01.css" rel="stylesheet" type="text/css"/>
Kode Posting jQuery Lightbox
Kode Dasar jQuery Lightbox
<a href="big-image-1.jpg" class="GRjQlightbox" title="Caption here"><img src="thumbnail-1.jpg" style="width:..px;height:..px;padding:..px;border:..px;background:#..;" /></a>
<a href="big-image-2.jpg" class="GRjQlightbox" title="Caption here"><img src="thumbnail-2.jpg" style="width:..px;height:..px;padding:..px;border:..px;background:#..;" /></a>
<a href="big-image-3.jpg" class="GRjQlightbox" title="Caption here"><img src="thumbnail-3.jpg" style="width:..px;height:..px;padding:..px;border:..px;background:#..;" /></a>
<a href="big-image-4.jpg" class="GRjQlightbox" title="Caption here"><img src="thumbnail-4.jpg" style="width:..px;height:..px;padding:..px;border:..px;background:#..;" /></a>
Contoh Kode Posting jQuery Lightbox
Contoh Kode Dasar jQuery Lightbox
<a class="GRjQlightbox" href="https://sites.google.com/site/gubhugreyotprojects/juli-2010/images/img_gubhugreyot-ngligo.jpg" title="Calon isteri pertama."><img src="https://sites.google.com/site/gubhugreyotprojects/juli-2010/images/th_gubhugreyot-ngligo.jpg" width="200" height="150" style="border:2px solid #555;padding:8px;margin:10px 0 0 10px;"/></a><a class="GRjQlightbox" href="https://sites.google.com/site/gubhugreyotprojects/juli-2010/images/img_gubhugreyot-baju-kuning.jpg" title="Calon isteri kedua."><img src="https://sites.google.com/site/gubhugreyotprojects/juli-2010/images/th_gubhugreyot-baju-kuning.jpg" width="200" height="150" style="border:2px solid #555;padding:8px;margin:10px 0 0 10px;"/></a><a class="GRjQlightbox" href="https://sites.google.com/site/gubhugreyotprojects/juli-2010/images/img_gubhugreyot-baju-putih.jpg" title="Calon isteri ketiga."><img src="https://sites.google.com/site/gubhugreyotprojects/juli-2010/images/th_gubhugreyot-baju-putih.jpg" width="200" height="150" style="border:2px solid #555;padding:8px;margin:10px 0 0 10px;"/></a><a class="GRjQlightbox" href="https://sites.google.com/site/gubhugreyotprojects/juli-2010/images/img_gubhugreyot-kaos-kuning.jpg" title="Calon isteri keempat."><img src="https://sites.google.com/site/gubhugreyotprojects/juli-2010/images/th_gubhugreyot-kaos-kuning.jpg" width="200" height="150" style="border:2px solid #555;padding:8px;margin:10px 0 0 10px;"/></a>
Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :
Update » Senin PAHING, January, 30, 2012
» Happy Blogging - gubhugreyot «
