0
я создаю приложение, как у facebook фотоальбомов, имеющих commentz ...передавая значение внутри функции яваскрипта и сохранить его в переменной PHP
У меня есть веб-страницу, которая показывает фото внутри альбома, когда ПИК щелкнул, лайтбокса открывается, и будет показан заголовок и commentz на картинке, Херес pictures.php код
<?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>
код
<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>
пройти album_id, pic_id к яваскрипту функциям, который затем пропускают к объектам в лайтбоксе, такие как ID = «t_albumid», ID = «t_imageid»
я должен написать запрос SQL в лайтбоксе как этот
SELECT * FROM candidate_pics_comment WHERE pic_id='$VariableHavingPicId
но для этого я должен использовать переменную в javasrcipt (image_id) и передать его снова в лайтбокс DIV ... в javasrcipt код
document.getElementById('t_imageid').value = image_id;
присваивает объект, значение как image_id, но hw мы можем присвоить image_id переменной php, чтобы я мог использовать ее в sql q uery ??
я имею в виду в JavaScript это может быть что-то вроде этого ::
function showpic(image_path,image_id,album_id,pic_caption)
{
<?php
$var = //assign the value image_id;?>
// rest of the code here;
}
я знаю его не представляется возможным, но может ли быть какой-то трюк, чтобы добиться этого в какой-то другой выход ??
к тому же, как я экспериментировал, я сделал smthng как этот
function showpic(image_path,image_id,album_id,pic_caption)
{
<?php
$_SESSION[pic_id]="hmmm";?>
//rest codes;
}
тогда, когда я использовал echo $_SESSION[pic_id] в PHP скрипт, он отображается hmmm
так я думал это может быть сделано smthng, как это? ?
function showpic(image_path,image_id,album_id,pic_caption)
{
<?php
$_SESSION[pic_id]=//assign image_id to session variable;?>
//rest codes;
}
Надеюсь, что я очистил свой путь, может кто-нибудь мне помочь ??? Кроме того, я использовал приложение AJAX, но я увидел, что AJAX возвращает ответ на объекты innerHTML, как ca он хранится в переменной php?
UPDATE
мой вопрос заключается в том, что я передаю значение от этого
<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>
к яваскрипту fiunction
function showpic(image_path,image_id,album_id,pic_caption)
теперь, как я могу назначить image_id переменную PHP который я могу использовать в div AlbumDiv, который используется для использования в лайтбокс,
если это невозможно, как может переменная сеанса присваивать значение image_id, возможно ли это внутри функции javascript?
** ТЛ; др **, что ваш вопрос? – Halcyon