Facebox jquery.mw

Menampilkan Gambar / Teks dengan Box Style Facebook jQuery

~ ~
Yuph Brotha.. sekarang saya coba share cara buat modal box dengan style facebook, biasa na banyak digunakan untuk nampilin gambar ato tulisan2 tertentu gitu,

Contoh na klik ajah facebox di atas sob,

ato

untuk contoh nampilin gambar,

Klik Disini Sob

nah begitu lah contoh na..
mau ?

langsung ajah caranya..

1. Masukan script jquery berikut dibawah <head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

2. Masukan Javascript berikut dibawah script jquery tadi,

<script src='http://www.hotlinkfiles.com/files/2644259_k5ca6/facebox.js' type='text/javascript'/>

<script type='text/javascript'>
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox()
})
</script>


3. Masukan juga css-nya sob..
/*Facebox*/
#facebox .b {
background:url(http://www.hotlinkfiles.com/files/2644245_c74zp/b.png);
}
#facebox .tl {
background:url(http://www.hotlinkfiles.com/files/2644250_gzeak/tl.png);
}
#facebox .tr {
background:url(http://www.hotlinkfiles.com/files/2644244_e9l2g/tr.png);
}
#facebox .bl {
background:url(http://www.hotlinkfiles.com/files/2644246_e5qa5/bl.png);
}
#facebox .br {
background:url(http://www.hotlinkfiles.com/files/2644247_c2fz9/br.png);
}
#facebox {
position: absolute;
width: 100%;
top: 0;
left: 0;
z-index: 100;
text-align: left;
}
#facebox .popup {
position: relative;
}
#facebox table {
margin: auto;
border-collapse: collapse;
}
#facebox .body {
padding: 10px;
background: #fff;
width: 370px;
}
#facebox .loading {
text-align: center;
}
#facebox .image {
text-align: center;
}
#facebox img {
border: 0;
}
#facebox .footer {
border-top: 1px solid #DDDDDD;
padding-top: 5px;
margin-top: 10px;
text-align: right;
}
#facebox .tl, #facebox .tr, #facebox .bl, #facebox .br {
height: 10px;
width: 10px;
overflow: hidden;
padding: 0;
}


4. Sekarang pemanggilannya.. Untuk Facebox Berisi Tulisan, pertama Sobat Masukan script dbwah ini di atas </body>
<div id="info" style="display:none;">
Isi tulisan sobat disini
</div>


Lalu, masukan script dibawah ini dtempat yg sobat mau,

<a href="#info" rel="facebox">Klik Disini Sob</a>


NB: #info adalah tag pemanggil untuk div info .
rel adalah tag yg digunakan untuk memakai facebox .

Untuk Facebox berisi gambar, tanpa memasukan div, langsung memasukan script dibawah ini ditempat yg sobat mau,

<a href="http://i27.tinypic.com/t66skw.jpg" rel="facebox">Klik Disini Sob</a>

NB: http://i27.tinypic.com/t66skw.jpg adalah url gambar, ganti dengan url gambar yg sobat mau .

Selesai... gmnah ? mau coba ??

4 komentar:

Posting Komentar