I am using below scripts to build an image gallery
1) scriptphoto.js
2) acceptcomment.php
3) edit_album.php
Edit_album.php contains a mysql query which run when an Image get click (to print comments if image is shared)
html:
<div id="photo_preview" style="display:none">
<div class="photo_wrp">
<img class="close" src="uploads/close.gif" />
<div style="clear:both"></div>
<div class="pleft">test1</div>
<div class="pright">test2</div>
<div style="clear:both"></div>
</div>
</div>
and Javascript on scriptphoto.js
function getPhotoPreviewAjx(id,name) {
$.post('edit_album.php',{action:'get_info',Id:id},
function(data){
if (name == 'YES'){
$('#photo_preview .pleft').html(data.data1);
$('#photo_preview .pright').html(data.data2);
$('#photo_preview').show();
}
else{
$('#photo_preview .pleft').html(data.data1);
$('#photo_preview .pright').html(data.data3);
$('#photo_preview').show();
}
}, "json"
);
};
php code on edit_album.php for that is
if ($_POST['action'] == 'get_info' && (int)$_POST['Id'] > 0) {
$iPid = (int)$_POST['Id'];
$shared = $_POST['shared'];
$sComments = '';
$sq= "SELECT * FROM comment_table WHERE ImageSN = '".$iPid."' ORDER BY C_when ASC LIMIT 10";
$sql = mysql_query($sq);
while($query = mysql_fetch_array($sql))
{
$sWhen = date('F j,Y' , $query['C_when']);
$sComments .= "<div class=\"comment\" id='".$query['C_id']."'>
<p>Comment from '".$query['c_name']."' <span>(".$sWhen.")</span>:</p>
<p>".$query['c_text']."</p>
</div>" ;
}
$sharewarning .="<div id='sharewarning'>Share Images To Enable Comments</div>";
$sCommentsBlock .="<div class=\"comments\" id=\"comments\">
<h2>Comments</h2>
<div id=\"comments_warning1\" style=\"display:none\">Don`t forget to fill both fields (Name and Comment)</div>
<div id=\"comment_warning2\" >You can't post more than one comment per 10 minutes (spam protection)</div>
<form onsubmit=\"return false;\">
<table>
<tr><td class=\"label\"><label>Your name: </label></td><td class=\"field\"><input type=\"text\" value=\"\" title=\"Please enter your name\" id=\"name\" /></td></tr>
<tr><td class=\"label\"><label>Comment: <input type=\"hidden\" name=\"action\" value=\"accept_comment\"></label></td><td class=\"field\"><textarea name=\"text\" id=\"text\"></textarea></td></tr>
<tr><td class=\"label\"> </td><td class=\"field\"><button onclick=\"submitComment(".$iPid."); return false;\">Post comment</button></td></tr>
</table>
</form>
<div><span id=\"commentspsn\"></span>
<div id=\"comments_list\">".$sComments."</div>
</div>";
$imageInfo = '';
$selecT = "SELECT imagesrc FROM imagerate WHERE ImageSN ='".$iPid."'";
$table = mysql_query($selecT);
while($query = mysql_fetch_array($table))
{
$imageInfo.=$query['imagesrc'];
}
require_once('classes/Services_JSON.php');
$oJson = new Services_JSON();
header('Content-Type:text/javascript');
echo $oJson->encode(array(
'data1' => '<img class="fileUnitSpacer" src="uploads/'. $imageInfo.'">' . $sPrevBtn . $sNextBtn ,
'data2' => $sCommentsBlock,
'data3' => $sharewarning,
));
exit;
}
when a image get clicked to view it shows like this
Till this it works fine but when I Insert a comment successfully, I want to refresh comments to show new comment thats where I got struck
jquery code for handling comments and inserting them is below
function submitComment(id) {
var sName = $('#name').val();
var sText = $('#text').val();
if (sName && sText) {
$.post('acceptcomment.php', { action: 'accept_comment', name: sName, text: sText, id: id },
function(data){
if (data != '1') {
$('#comments_list').fadeOut(2000, function () {
$(this).html(data);
$(this).fadeIn(1000);
});
$("#commentspsn").html('<span id="commentspan"> <b>comment Submitted</b></span>');
}
}
);
} else {
$('#comments_warning1').fadeIn(1000, function () {
$(this).fadeOut(1000);
});
}
};
acceptcomment.php code is
$iItemId =(int)$_POST['id']; // prepare necessary information
$sIp = getVisitorIP();
$sName = $_POST['name'];
$sText = $_POST['text'];
if ($sName && $sText) {
$sql = "SELECT ImageSN FROM comment_table WHERE ImageSN = '".$iItemId."' AND commentip = '".$sIp."' AND C_when >= 'UNIX_TIMESTAMP()-600' LIMIT 1";
$query = mysql_query($sql);
$array = mysql_num_rows($query);
if ($array == 0 ) {
$insert = "INSERT INTO comment_table SET ImageSN = '".$iItemId."' , commentip = '".$sIp."' , C_when = UNIX_TIMESTAMP(), c_name = '".$sName."', c_text ='".$sText."'";
$sql = mysql_query($insert);
$update= 'UPDATE imagerate SET comment_counts = comment_counts + 1 WHERE ImageSN = "'.$iItemId.'"';
$query = mysql_query($update);
}
}
return 1;
need guideness
