私の問題は、選択した画像に応じて動的変数を表示するために、ダイアログ div とその中の他のすべての div を取得できないことです。
ユーザーの写真のテーブルを動的に表示できるようにしたいのですが、その写真をクリックすると、動的なテーブルを含む div が黒くなり、ユーザーの写真やその他の情報を含むポップアップが JQUERY を使用して表示されます。すべてが機能しますが、クリックしたユーザーのそれぞれの変数を表示するポップアップが表示されます。
$memberdisplaylisttdの内部から始まり、配列に従って適切に表示されますが、$firstnameをクリックすると、ダイアログ div ポップアップは行 1 から変数を表示し続け、選択されている行に関する変数を表示しません。私が間違っていることと、これを修正する方法について何か考えはありますか?$member_pic$member_pic$member_pic
また、動的テーブルを含む profilepicsdark div 内でダイアログ div ポップアップを中央に配置するために必要な jQuery コーディングを知っている人はいますか?
PHP
$MemberDisplayList = "<table border='0' align='left' cellpadding='7'>";
$sql = mysql_query("SELECT * FROM users WHERE email_activated='1'");
$counter = 0;
while($row = mysql_fetch_array($sql)){
$id = $row["id"];
$firstname = $row["first_name"];
$sex = $row["sex"];
$age = $row["age"];
$focus = $row["focus"];
$lastlog = $row["last_log_date"];
$firstnameCut = substr($firstname, 0, 10);
$check_pic = "members/$id/image01.jpg";
if (file_exists($check_pic)) {
$member_pic = "<img src=\"members/$id/image01.jpg\" width=\"100px\" border=\"0\" />";
} else {
$member_pic = "<img src=\"members/0/image01.jpg\" width=\"100px\" border=\"0\" />";
}
if( $counter % 7 == 0)
$MemberDisplayList .= '<tr>';
$counter++;
$MemberDisplayList .= '<td>';
$MemberDisplayList .= '<a href="" title="' . $firstname . '"><font size="-2">' . $firstnameCut . '</font></a><br /><div class="memberpreviewpopup" style=" height:100px; overflow:hidden;">' . $member_pic . '</div><div class="boxes"><div id="dialog" class="window"><div id="title">' . $member_pic . '</div><div id="info">' . $firstname . '</div><div id="info">' . $lastlogdate . '</div><div id="info">' . $sex . '</div><div id="info">' . $age . '</div><div id="info">' . $focus . '</div><a href="" class="close"/>Close it</a><a href="profile.php?id=' . $id . '">View Profile</a></div></div></td>';
if( $counter % 7 == 0)
$MemberDisplayList .= '</tr>';
} // close while loop
$MemberDisplayList .= "</table>";
Jクエリ
<script type="text/javascript">
function codeBinsAddEvent(obj,type,fn){
if(obj.attachEvent){
if(type == "load"){
obj.attachEvent('on'+type, fn);
}
else{
obj.attachEvent('onreadystatechange', fn);
}
/*
obj['e'+type+fn]=fn;
obj[type+fn]=function(){
obj['e'+type+fn](window.event)}
;obj.attachEvent('on'+type,obj[type+fn])*/
}
else obj.addEventListener(type,fn,false)
};
function codeBinsAddLoadEvent(fn){
codeBinsAddEvent(document.addEventListener&&!window.addEventListener?document:window,'load',fn)
};
function codeBinsAddReadyEvent(fn){
codeBinsAddEvent(document,'DOMContentLoaded',fn)
};
</script>
<script type="text/javascript">
$(function() {
$(".memberpreviewpopup").click(function(e) {
e.preventDefault();
var $dialog = $("#dialog");
var maskHeight = $('.profilepics').height();
var maskWidth = $('.profilepics').width();
$('#profilepicsdark').css({
'width': maskWidth,
'height': maskHeight
});
$('#profilepicsdark').fadeIn(100);
$('#profilepicsdark').fadeTo("fast", 0.8);
var winH = $('.profilepics').height();
var winW = $('.profilepics').width();
$('#profilepicsdark').css('top', winH / 2 - $dialog.height() / 2);
$('#profilepicsdark').css('left', winW / 2 - $dialog.width() / 2);
$dialog.fadeIn(400);
});
$('.window .close').click(function(e) {
e.preventDefault();
$('#profilepicsdark').hide();
$('.window').hide();
});
$('#profilepicsdark').click(function() {
$(this).hide();
$('.window').hide();
});
});
</script>
CSS
<style type="text/css">
#profilepicsdark{
width: 100%;
height: 100%;
z-index:9000;
background-color:#000;
opacity:0.5;
display:none;
}
#dialog{
position: absolute;
padding:0px;
width:250px;
height:250px;
background-color:#d4e1ff;
display:none;
z-index:99999;
}
#dialog #msg{
margin-left:20px;
padding:5px;
font-size:14px;
}
#dialog #title{
margin:0px;
padding:5px;
float: left;
}
#dialog #info{
width: 100px;
margin-right:20px;
padding:5px;
font-size:14px;
float: right;
text-align:right;
}
#dialog .close{
float:right;
background:#afa1f5;
bordercolor:1px solid #445cd88;
border-radius: 1.2em;
width:100px;
text-align:center;
font-size:13px;
}
#dialog .close:hover{
background:#af55d9;
bordercolor:1px solid #445cd88;
}
</style>