Facebook style photo comment system

Facebook style photo comment. Here i have use normal light box pop window. inside the box i have design similar like facebook design. follow this code you can learn facebook style photo comments system.

Live Demo Download

Database

CREATE TABLE `messages`
(
  `msg_id` int(11) NOT NULL AUTO_INCREMENT,
  `msg` varchar(250) NOT NULL,
)

HTML

<html>
<head>
<title>Facebook comments</title>
</head>    
<body>
<div class="head1">
<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">
  <img src="2.jpg" width="240" height="140"></a>
</div>
<div id="light" class="light_box">
 <a style="float:right; margin-top:-10px;" href = "javascript:void(0)"
  onclick = "document.getElementById('light').style.display='none';
 document.getElementById('fade').style.display='none'">
 <img src="4-close.png" width="30" height="30"></a>
<img style="margin-left:50px;" 
src="2.jpg" width="500" height="300">
<div style="float:right;">
<form method="post" name="form" action="">
<h5><img src="2.jpg" width="45" height="32">
karthick Muthu holi photo </h5>
<textarea  name="content" id="content" cols="40" maxlength="250" >
</textarea><br />
<input type="button" value="Update" name="submit" class="update_button"/>
</form>
<div id="flash"></div>
<ul id="update" class="timeline">
</ul>
</div>
</div>
<div id="fade" class="photo_box"></div>
</body>
</html>
<script type="text/javascript" src="jquery.min.js">
</script>
<script type="text/javascript" >
$(function() {

//Update Message...
$(".update_button").click(function() {

var boxval = $("#content").val();
var username = $("#username").val();
var dataString = 'content='+ boxval + '&username=' + username;

if(boxval=='')
{
alert("Please Enter Some Text");
}
else
{
$("#flash").show();
$("#flash").fadeIn(400).html('<img src="loading.gif" width="20" height="20"> <span class="loading">Loading Comment...</span>');

$.ajax({
type: "POST",
url: "ajax.php",
data: dataString,
cache: false,
success: function(html){
$("ul#update").prepend(html);
$("ul#update li:first").slideDown("slow");
document.getElementById('content').value='';
document.getElementById('content').focus();
$("#flash").hide();
}
});
} return false;
});


});
</script>

Ajax.php

<?php
if(isset($_POST['content']))
{
$content=$_POST['content'];
mysql_query("insert into messages(msg) values ('$content')");
$sql_in= mysql_query("SELECT msg,msg_id FROM messages order by msg_id desc");
$r=mysql_fetch_array($sql_in);
$msg=$r['msg'];
$msg_id=$r['msg_id'];
}
?>
<li class="bar<?php echo $msg_id; ?>">
<div align="left"><span style="color:#3b5998; font-weight:bolder; font-size:12px;" > Karthick muthu </span>
<span style="font-size:12px;" ><?php echo $msg; ?> </span>
</div>
</li>

CSS

<style>

ul {
list-style-type: none;
}
 ul li
 {
     background-color:#edeff4;
     width:320px;
     height:23px;
     margin-top: 1px;
padding: 4px;
word-wrap: break-word;
display: list-item;
text-align: -webkit-match-parent;
 }
        .photo_box{
            display: none;
            position: absolute;
            top: 0%;
            left: 0%;
            width: 100%;
            height: 100%;
            background-color: black;
            z-index:1001;
            -moz-opacity: 0.8;
            opacity:.80;
            filter: alpha(opacity=80);
        }
        .light_box {
            display: none;
            position: absolute;
            top: 10%;
            left: 10%;
            width: 75%;
            height: 75%;
            padding: 16px;
            border: 16px solid #666;
            background-color:#f7f7f7;
            z-index:1002;
            overflow: auto;
        }

.head1
{
width:250px; float:left; height:150px; margin-top:20px; border:dashed 2px #0099FF;

}
    </style>

Menu Link

07 July, 2014

Facebook style photo comment system

Database

HTML

Ajax.php

CSS

2 comments: