Show Friends List in Facebook style Using jQuery Facebox

Author: Zeeshan Rasool | Last updated on July 1st, 2010

Facebook, JQuery, PHP, Web Development

[ad#co-4]

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`)
)

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`)

)

[ad#co-3]

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

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

<div class="top_area">Friends of 99 Points</div>

<img style="float: left;" src="images/<?php echo $row['f_image'];?>" alt="" height="50" />

</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>

// 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>

[ad#co-2]

Recommended WordPress Themes Store

If you enjoyed this post, please consider leaving a comment below or subscribing to the RSS feed to have future articles delivered to your feed reader. You can also follow us on Facebook or Twitter @99Points

This awesome post has been created by 99Points editor's team. You can follow our updates on Twitter and facebook, OR drop an email at 99points.info@gmail.com