Facebook has many beautiful and stylish effects which is easy to integrate in our web application using jQuery. Here i have created facebook friends list style using jQuery facebox.
Download facebox plugin file to create facebox.
Database:
|
1 2 3 4 5 6 7 |
CREATE TABLE IF NOT EXISTS `friends` ( `f_id` int(11) NOT NULL AUTO_INCREMENT, `f_name` varchar(255) NOT NULL, `tag_line` varchar(255) NOT NULL, `f_image` varchar(50) NOT NULL, PRIMARY KEY (`f_id`) ) |
Custom CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
.uiButtonLarge{ padding:2px 6px; } input{ font-size:13px; } a#link{ font-family:Arial, Helvetica, sans-serif; color:#3B5998; font-weight:bolder; } .uiButtonConfirm{ background-color:#5B74A8; background-position:0 -48px; border-color:#29447E #29447E #1A356E; font-weight:bold; color:#FFFFFF; } .friends_area{ width:500px; padding:5px; height:50px; border-bottom: #999999 solid 1px; } .top_area{ background:#627AAD; font-size:14px; color:#FFFFFF; font-weight:bold; padding:6px 6px 6px 12px; } .name b{ font-size:14px; color:#3B5998; cursor:pointer; } .name{ font-size:14px; color:#666; padding:8px; } #search_area{ background:#F2F2F2 none repeat scroll 0 0; width:515px; padding:5px; height:30px; } |
index.html:
|
1 2 3 4 5 6 7 8 9 |
// download and include jquery.js file // download and include facebox.js jQuery(document).ready(function($){ $('a[rel*=facebox]').facebox({ }) }) // and link which shows facebox on click. <a id="link" href="show_friends.php" rel="facebox">All Friends</a> |
Comments are closed.