May

Show Friends List in Facebook style Using jQuery Facebox

ZeeShaN

Facebook, JQuery, PHP, Web Development Tags

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:

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:

.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;
}

show_friends.php:

<div class="top_area">Friends of 99 Points</div>
 
 
<div id="search_area"></div>
 
 
<div style="overflow-y: scroll; height: 370px; margin-top: 3px;">
 
 
<div class="friends_area">
	   <img style="float: left;" src="images/&lt;?php  echo $row['f_image'];?&gt;" alt="" height="50" />
		   <label class="name" style="float: left;">
		   <strong> </strong>
 
		   </label></div>
 
 
 
</div>

index.html:

// 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" rel="facebox" href="show_friends.php">All Friends</a>