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'/>
<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 ??
3 komentar:
~~~(( Komentar ))~~~
gak mau coba ah, dah ada .... :51
mantap..!
Thanks bro udah share ilmunya nich..
bagaimana membuat side bar sebelah kiri menjadi naik turun (untuk link home, fb dan twitter) seperti yang kamu miliki, terima kasih sebelumnya
Posting Komentar