I am creating an application like that of Facebook photo albums having comments.
I have a webpage, which shows the pics inside an album, when a pic is clicked, a lightbox opens up, and the caption and comments on the pic will be shown. Here's the pictures.php code
<?php
session_start();
ob_start;
include('connection.php');
?>
<html>
<head>
<title>Photos</title>
<style type="text/css">
.wraptocenter
{
width: 200px;
height: 150px;
overflow: hidden;
}
.wraptocenter img
{
vertical-align: top;
}
.black_overlay
{
display: none;
position: fixed;
top: 0%;
left: 0%;
width: 100.7%;
height: 100%;
background-color: black;
z-index: 1001;
-moz-opacity: 0.8;
opacity: .80;
filter: alpha(opacity=80);
}
.white_imagebox
{
display: none;
position: fixed;
top: 5%;
left: 6%;
width: 900px;
height: 500px;
padding: 0px;
border: 0px solid #a6c25c;
background-color: white;
z-index: 1002;
overflow: visible;
}
</style>
<script type="text/javascript" src="AJAX/AjaxInsertPicComment.js"></script>
<script>
function showpic(image_path,image_id,album_id,pic_caption)
{
document.getElementById('AlbumDiv').style.display = "block";
document.getElementById('fade').style.display = "block";
document.getElementById('image').src = image_path; // this line added
img = new Image();
img.src = image_path;
document.getElementById('t_albumid').value = album_id;
document.getElementById('t_imageid').value = image_id;
document.getElementById('t_albid').value = album_id;
document.getElementById('t_picid').value = image_id;
document.getElementById('albumid').value = album_id;
document.getElementById('imageid').value = image_id;
document.getElementById('t_imagepath').value = image_path;
document.getElementById('caption_holder').value = pic_caption;
if(img.width > 500 && img.height > 450)
{
if(img.width > img.height)
{
document.getElementById('image').style.width = "500px";
document.getElementById('image').style.height = 'auto';
delete img;
return false;
}
else
{
document.getElementById('image').style.height = "450px";
document.getElementById('image').style.width = 'auto';
delete img;
return false;
}
}
else if(img.height > 450 && img.width < 500)
{
document.getElementById('image').style.height = "450px";
delete img;
return false;
}
else if(img.height < 450 && img.width > 500)
{
if(img.width > img.height)
{
document.getElementById('image').style.width = "500px";
document.getElementById('image').style.height = 'auto';
delete img;
return false;
}
else
{
document.getElementById('image').style.height = "450px";
document.getElementById('image').style.width = 'auto';
delete img;
return false;
}
}
else if(img.width < 500 && img.height < 450)
{
if(img.width > img.height)
{
document.getElementById('image').style.width = "500px";
document.getElementById('image').style.height = 'auto';
delete img;
return false;
}
else
{
document.getElementById('image').style.height = "450px";
document.getElementById('image').style.width = 'auto';
delete img;
return false;
}
}
delete img;
alert("humm");
return false;
}
</script>
</head>
<body>
<div id="photo_holder">
<table width="1000px" cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td width="50px" align="center"/>
<td align="center" colspan="2" background="Images/header_menu.png" style="padding-right:2px;">
<?php include('header.php');?>
</td>
<td width="50px" align="center"/>
</tr>
<tr>
<td width="50px" align="center" ></td>
<td width="600px" align="center">
<?php
$album_id=$_REQUEST['txt_albumid'];
echo $album_id;
/* how many columns */
$column_number='3';
/* html table start */
?>
<div id="photo_container" align="center" width="600px">
<table border="1px" cellspacing="5" cellpadding="0" align="left">
<?php
$sql="SELECT * FROM candidate_pics WHERE album_id='$album_id'";
$result=mysql_query($sql,$con);
// $row=mysql_fetch_array($result);
$recordcounter=1; /* counts the records while they are in loop */
while($row=mysql_fetch_array($result))
{
/* decide if there will be new Table row (<TR>) or not ... left of division by column number is the key */
if($recordcounter%$column_number==1)
{
echo "<tr>";
}
?>
<td align="center" width="200px">
<div class="wraptocenter" align="center">
<?php $_SESSION['pic_id']=$row[pic_id];?>
<a href="javascript:void(0)"
onClick="showpic('<?php echo $row[pic_path];?>','<?php echo $row[pic_id];?>',
'<?php echo $row[album_id];?>','<?php echo $row[pic_caption];?>')";>
<img src="<?php echo $row[pic_path];?>"/></a>
</div>
</td>
<?php
/* decide if there will be end of table row */
if($recordcounter%$column_number==0)
{
echo "</tr>";
}
$recordcounter++; /* increment the counter */
}
if(($recordcounter%$column_number)!=1){ echo "</tr>"; }
?>
</table>
</div>
</td>
<td width="300px" align="center" >
<div id="photo_uploader">
<form method="post" action="photo_upload.php" enctype="multipart/form-data">
<table width="300px" align="center" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" width="100px">Upload Pic::</td>
<td align="center" width="200px">
<input type="file" name="file" id="file" style="width: 200px;"/>
</td>
</tr>
<tr>
<td align="center" width="100px"/>
<td align="center" width="200px">
<input type="submit" name="submit_pic" id="submit_pic" value="Click to upload" style="width: 200px;"/>
<input name="txt_albumid" type="hidden" value="<?php echo $album_id;?>"/>
</td>
</tr>
</table>
</form>
</div>
</td>
<td width="50px" align="center" ></td>
</tr>
</table>
</div>
<div id="AlbumDiv" class="white_imagebox">
<table align="center" cellpadding="0" cellspacing="0" border="0" width="900px">
<tr>
<td colspan="2" height="25px">
<div id="close">
<a href="javascript:void(0)"
onclick="document.getElementById('AlbumDiv').style.display =
'none';document.getElementById('fade').style.display='none'">
<img src="images/close-icon.png" style="border-style: none; border-color: inherit;
border-width: 0px; height: 17px; width: 16px;" align="right" /></a>
</div>
</td>
</tr>
<tr>
<td width="600px" align="center">
<table width="600px" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="50px" align="center"/>
<td align="center" width="500px">
<div id="image_holder" style="width: 500px; height: 450px;
background-color:#666666;">
<input type="image" id="image" name="image"/>
</div>
</td>
<td width="50px" align="center"/>
</tr>
<tr>
<td/>
<td>
<input type="text" id="caption_holder" name="caption_holder"
style="width:500px;"/>
</td>
<td/>
</tr>
</table>
</td>
<td width="300px" align="center">
<table width="300px" cellpadding="0" cellspacing="0" border="0" align="top">
<tr>
<td align="center" width="100px">
<form method="post" action="photo_delete.php">
<input type="submit" name="delete" id="delete" value="Delete"
class="button" style="width: 100px;"/>
<input type="hidden" name="t_imageid" id="t_imageid"/>
<input type="hidden" name="t_imagepath" id="t_imagepath"/>
<input type="hidden" name="t_albumid" id="t_albumid"/>
</form>
</td>
<td align="center" width="100px">
<form>
<input type="button" name="edit" id="edit" value="Edit" class="button"
style="width: 100px;"
onclick="document.getElementById('pic_caption').style.visibility = 'visible';
document.getElementById('enter_caption').style.visibility = 'visible';"/>
</form>
</td>
<td align="center" width="100px">
<form method="post" action="">
<input type="submit" name="cover_pic" id="cover_pic" value="Set CoverPic" class="button"
style="width: 100px;"/>
<input type="hidden" name="t_albumname" id="t_albumname"/>
<input type="hidden" name="t_imagename" id="t_imagename"/>
</form>
</td>
</tr>
<tr>
<td height="100px" colspan="3">
<form method="post" action="photo_edit.php">
<input type="text" name="pic_caption" id="pic_caption" style="visibility:hidden;"/>
<input type="submit" name="enter_caption" id="enter_caption" style="visibility:hidden;"/>
<input type="hidden" name="t_picid" id="t_picid"/>
<input type="hidden" name="t_albid" id="t_albid"/>
</form>
</td>
</tr>
<tr>
<td height="300px" colspan="3">
<div id="" style="overflow-y:scroll; height:300px;">
<table width="282px" cellpadding="0" cellspacing="0" border="0"
align="center">
<tr>
<td>
<?php
echo $_SESSION[pic_id];?>
<div id="message_report">
</div>
</td>
</tr>
<tr>
<td>
<form method="post" action=
"javascript:get(document.getElementById('pic_comment_form'));" name=
"pic_comment_form" id="pic_comment_form">
<table width="280px" cellpadding="0" cellspacing="0" border="0"
align="center" >
<tr>
<td width="100px">
<input type="text" name="comment" id="comment" style="width:100px"/>
</td>
<td width="80px"/>
<td width="100px">
<input type="submit" name="comment_enter" id="comment_enter" style="width:100px"/>
</td>
<tr>
<td>
<input type="hidden" name="albumid" id="albumid"/></td>
<td>
<input type="hidden" name="imageid" id="imageid"/></td>
<td>
<input type="hidden" name="user" id="user"
value="<?php echo $_SESSION[logged_user];?>"/></td>
</tr>
</table>
</form>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div id="fade" class="black_overlay">
</div>
</body>
</html>
The code
<a href="javascript:void(0)"
onClick="showpic('<?php echo $row[pic_path];?>','<?php echo $row[pic_id];?>',
'<?php echo $row[album_id];?>','<?php echo $row[pic_caption];?>')";>
<img src="<?php echo $row[pic_path];?>"/></a>
pass the album_id, pic_id to the javascript functions which is then passed to the objects in the lightbox such as id="t_albumid", id="t_imageid"
I need to write a SQL query in the lightbox like this:
SELECT * FROM candidate_pics_comment WHERE pic_id='$VariableHavingPicId
but for this I must use the variable in the JavaScript image_id and pass it again to the lightbox div in the JavaScript. The code:
document.getElementById('t_imageid').value = image_id;
assigns the object, the value as image_id, but how can we assign the image_id to a php variable so that I can use it in the sql query?
I mean in the JavaScript can it be something like this:
function showpic(image_path,image_id,album_id,pic_caption)
{
<?php
$var = //assign the value image_id;?>
// rest of the code here;
}
I know it's not possible, but is there some trick to achieve this?
Moreover as I was experimenting, I did something like this:
function showpic(image_path,image_id,album_id,pic_caption)
{
<?php
$_SESSION[pic_id]="hmmm";?>
//rest codes;
}
Then when I used echo $_SESSION[pic_id] in php script, it displayed hmmm
So I was thinking can it be done something like this?
function showpic(image_path,image_id,album_id,pic_caption)
{
<?php
$_SESSION[pic_id]=//assign image_id to session variable;?>
//rest codes;
}
Besides I used AJAX application, but I saw that AJAX returns the response to the objects innerHTML, how ca it be stored in a php variable?
Update
My question is that, I am passing values from this
<a href="javascript:void(0)"
onClick="showpic('<?php echo $row[pic_path];?>','<?php echo $row[pic_id];?>',
'<?php echo $row[album_id];?>','<?php echo $row[pic_caption];?>')";>
<img src="<?php echo $row[pic_path];?>"/></a>
to the JavaScript fiunction
function showpic(image_path,image_id,album_id,pic_caption)
Now how can I assign image_id to a PHP variable which I can use in the div AlbumDiv which is used for the lightbox. If that not possible how can a session variable be assign the value of image_id, is it possible inside the JavaScript function?
