Dengan penggunaan kerangka kerja javascript seperti jQuery atau Mootools, anda boleh mencipta efek lightbox yang lebih menarik. Walaubagaimanapun, penggunaan kerangka kerja ini mungkin tidak diperlukan jika anda hanya mahu mencipta efek lightbox yang ringkas. Ini dapat menjimatkan jangka masa muat turun laman anda pada pelayar web.



Dalam tutorial ini, saya akan menunjukkan cara menghasilkan efek lightbox dengan menggunakan CSS. Javascript yang terlibat dalam tutorial ini hanyalah event handler onClick sahaja.



CSS



Untuk pengenalan mengenai CSS, anda boleh merujuk tutorial: Apa itu CSS. CSS yang digunakan dalam tutorial ini adalah seperti berikut:



.overlay {
       display: none;
       position: absolute;
       top: 0%;
       left: 0%;
       width: 100%;
       height: 100%;
       background-color: black;
       z-index:1001;
       -moz-opacity: 0.8;
       opacity:.80;
       filter: alpha(opacity=80);
       }
.content {
       display: none;
       position: absolute;
       top: 25%;
       left: 25%;
       width: 50%;
       height: 50%;
       padding: 16px;
       border: 15px solid #6687F2;
       background-color: white;
       z-index:1002;
       overflow: auto;
       }



Dalam CSS ini, kelas overlay merupakan kelas yang akan membuatkan bahagian utama laman web kelihatan kabur. Di sini, saya menggunakan -moz-opacity: 0.8; opacity:.80; filter: alpha(opacity=80);



Ketiga-tiga property (rujuk artikel: CSS) yang digunakan akan menghasilkan efek kekaburan yang sama iaitu sebanyak 80%. Saya menggunakan ketiga-tiga property yang berlainan bagi mengatasi masalah sokongan oleh pelayar web. -moz-opacity digunakan bagi menyokong pelayar web seperti Netscape Navigator. opacity merupakan property standard dan disokong oleh kebanyakan pelayar web seperti Firefox, Safari, dan Opera. filter: alpha(opacity=80) digunakan bagi menyokong pelayar web Internet Explorer.



Kelas content pula merupakan kandungan yang akan dipaparkan di dalam lightbox. Anda boleh memasukkan apa sahaja kandungan termasuk gambar dalam kelas ini. Property overflow digunakan bagi membenarkan kandungan di dalam lightbox tersebut di skrol.



HTML



Pada bahagian HTML, anda perlu memasukkan kod berikut:



<div id="light" class="content">Kandungan dalam lightbox</div>
<div id="kabur" class="overlay"></div>



Perhatikan penggunaan kelas CSS dalam kod di atas. Anda juga dapat perhatikan penggunaan id bagi tag <div>. Saya menggunakan id pada <div> bagi membolehkan javascript mengawal blok <div> tersebut.



Javascript



Javascript yang digunakan untuk mengaktifkan lightbox adalah seperti berikut:



document.getElementById('light').style.display='block';
document.getElementById('kabur').style.display='block';



Kod untuk menutup lightbox tersebut adalah seperti berikut:



document.getElementById('light').style.display='block';
document.getElementById('kabur').style.display='none';



Kedua-dua script ini akan dipanggil dengan menggunakan event handler onClick.



Keseluruhan



Anda boleh mencuba tutorial ini dengan menyalin keseluruhan kod berikut:



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>Contoh Penggunaan CSS Lightbox</title>
        <style>
        .overlay{
            display: none;
            position: absolute;
            top: 0%;
            left: 0%;
            width: 100%;
            height: 100%;
            background-color: black;
            z-index:1001;
            -moz-opacity: 0.8;
            opacity:.80;
            filter: alpha(opacity=80);
        }
        .content {
            display: none;
            position: absolute;
            top: 25%;
            left: 25%;
            width: 50%;
            height: 50%;
            padding: 16px;
            border: 15px solid #6687F2;
            background-color: white;
            z-index:1002;
            overflow: auto;
        }
    </style>
    </head>
    <body>
        <p>Untuk memaparkan efek lightbox, sila klik <a href = "javascript:void(0)" 
onclick = "document.getElementById('light').style.display='block';document.getElementById('kabur').style.display='block'">disini.</a></p>
        <div id="light" class="content">Kandungan dalam lightbox.. <a href = "javascript:void(0)" 
onclick = "document.getElementById('light').style.display='none';document.getElementById('kabur').style.display='none'">Tutup</a></div>
        <div id="kabur" class="overlay"></div>
    </body>
</html>

Penilaian: 
1
Your rating: None Average: 1 (1 vote)

Komen

parasolx's picture
Admin

cayalah tutorial... aku dah try pada normal site, mmg menjadi.

cuma paparan tutorial ini ade problem sket.. tak pe.. nnt malam ni aku cuba godek dia punye style untuk code ni.. ade masalah sket nih..

------

Hadafi Solution & Resources: http://parasolx.net
Professional in Drupal web development, theme designing, consultation and training

johnburn's picture

apa prob dia? layout lari ke cmne?

parasolx's picture
Admin

a'ah.. layout ade lari sedikit sebab style untuk pre code tuh tak dimasukkan dalam style. pastu dalam fckeditor tuh dia still guna style yang asal.
so, abaikan semasa penulisan, sebab semasa dalam fckeditor, dia akan guna style dari fckeditor module. lepas send semua style akan convert untuk compatible dengan template.

------

Hadafi Solution & Resources: http://parasolx.net
Professional in Drupal web development, theme designing, consultation and training

DeYN_XP's picture

8) Nice tutorial...Get It DOne Fast & Right Bro ! ekeke...

------

Product Sarawak &nbsp;- &nbsp;Jualan Product keluaran Sarawak secara online
********************** HTML + CSS + XHTML + XML + PHP + SQL *******************

&nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp;

&nbsp;
*************************** Dunia Server adalah Nyata !!! ********************************&nbsp;