Show Friends List in Facebook style Using jQuery Facebox

Author: Zeeshan Rasool | Last updated on March 30th, 2019

Facebook, JQuery, PHP Tutorials, Web Development

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

)

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;

}

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

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

Author of 99Points
Zeeshan Rasool is an experienced PHP full-stack Web Developer and founder at 99Points. Expert in MVC (Codeigniter, Laravel), WordPress, Bootstrap, ReactJS, JSON, CSS jQuery & HTML5

Show Friends List in Facebook style Using jQuery Facebox

Database:

index.html:

Recommended WordPress Themes Store

Categories

Popular post

Author of 99Points Zeeshan Rasool is an experienced PHP full-stack Web Developer and founder at 99Points. Expert in MVC (Codeigniter, Laravel), WordPress, Bootstrap, ReactJS, JSON, CSS jQuery & HTML5

Show Friends List in Facebook style Using jQuery Facebox

Database:

index.html:

Few More Brilliant Posts !

Recommended WordPress Themes Store

Categories

Popular post

Author of 99Points
Zeeshan Rasool is an experienced PHP full-stack Web Developer and founder at 99Points. Expert in MVC (Codeigniter, Laravel), WordPress, Bootstrap, ReactJS, JSON, CSS jQuery & HTML5