bigimg fancybox work

This commit is contained in:
ppwwyyxx
2014-12-13 00:39:10 +08:00
parent 45379cb8b5
commit a3b641df2e
7 changed files with 395 additions and 87 deletions
+30 -31
View File
@@ -4,48 +4,47 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>WeChat</title>
<link rel="stylesheet" type="text/css" href="http://localhost:8000/wx.css">
<style type="text/css">{style}</style>
{extra_css}
{extra_js}
</head>
<body>
<div id="container">
<div id="chat" class="chatPanel normalPanel">
<div class="chatContainer" style="min-height:100%;">
<div class="chatMainPanel" id="chatMainPanel" style="padding-top:40px;">
<div class="chatTitle" style="margin-top: -40px;">
<div class="chatNameWrap">
<p class="chatName" id="messagePanelTitle">{talker}</p>
</div>
<div id="chat" class="chatPanel normalPanel">
<div class="chatContainer" style="min-height:85%;">
<div class="chatMainPanel" id="chatMainPanel" style="padding-top:40px;">
<div class="chatTitle" style="margin-top: -40px;">
<div class="chatNameWrap">
<p class="chatName" id="messagePanelTitle">{talker}</p>
</div>
<div class="chatScorll" style="height: 100%; overflow-y: scroll; position: relative; font-family:initial;">
<div id="chat_chatmsglist" class="chatContent" style="position: absolute;">
{messages}
</div>
</div>
<div class="chatScorll" style="height: 100%; overflow-y: scroll; position: relative; font-family:initial;">
<div id="chat_chatmsglist" class="chatContent" style="position: absolute;">
{messages}
</div>
</div>
</div>
</div>
</div>
<script type='text/javascript'>
// avoid repeatly inserting the same base64 img into html
var chats = document.getElementsByClassName('me');
for (var k = 0; k < chats.length; k ++) {{
var avt = chats[k].getElementsByClassName('avatar')[0];
avt.src = "data:image/jpg;base64,{avatar_me}";
}}
var chats = document.getElementsByClassName('you');
for (var k = 0; k < chats.length; k ++) {{
var avt = chats[k].getElementsByClassName('avatar')[0];
avt.src = "data:image/jpg;base64,{avatar_you}";
}}
var playVoice = function(event) {{
var target = event.target;
while (!target.classList.contains('cloud'))
target = target.parentElement;
var audio = target.getElementsByTagName('audio')[0];
audio.play();
}};
var playVoice = function(event) {{
var target = event.target;
while (!target.classList.contains('cloud'))
target = target.parentElement;
var audio = target.getElementsByTagName('audio')[0];
audio.play();
}};
$(document).ready(function() {{
$(".fancybox").fancybox({{
// fancybox will otherwise scroll page to top
helpers: {{ overlay : {{ locked : false}}}}
}});
// initialize avatar, avoid repeatly inserting the same base64 img into html
$('.me .avatar').each(function(_, e) {{ e.src = "data:image/jpg;base64,{avatar_me}"; }})
$('.you .avatar').each(function(_, e) {{ e.src = "data:image/jpg;base64,{avatar_you}"; }})
}});
</script>
</body>
</html>