Cara Membuat JQuery LightBox

on
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  atau di atas kode 
kemudian segera coba di ruang posting, terbitkan, buka blog dan nikmati cantiknya tampilan Jquery LightBox.

CARA MEMBUAT JQUERY LIGHTBOX

  1. Login ke Blogger.
  2. Halaman Dasbor (Dasboard).
  3. Klik Rancangan (Design).
  4. Klik Edit HTML.
  5. Cari kode . Gunakan Ctrl + F untuk mempermudah pencarian.
  6. Copy dan paste-kan seluruh kode css dan javascript di bawahkode  atau di atas kode 
.
  • 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.

    Kesini:




    " 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

    Kesini:




    <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

    Kesini:




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





      
    save 

    Comments

    Post a Comment