shotsDetailsLike.html 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159
  1. <style>
  2. .right-content{
  3. padding-top:54px!important; padding-left:0!important; width:970px!important;
  4. }
  5. </style>
  6. <div class="content">
  7. <% include ../leftBar.html %>
  8. <!-- right content start -->
  9. <div class="right-content myAlbum-underReview">
  10. <div class="pageInfo">My Shots</div>
  11. <div class="shotsDetails">
  12. <a style="color: #1AA3DA;" href="/broadcast/shots/pass"><< Back to My Shots</a>
  13. <div class="shotsDetailsAddTime">Posted at <span class="localTime" data-time="<%=shotsInfo.add_time%>"></span></div>
  14. <div style="margin-top: 10px;">
  15. <div class="shotsDetailsImg">
  16. <% if(shotsInfo.type == 1) {%>
  17. <img class="showOriginal cursor center height240" data-img="<%=shotsInfo.originImg%>" src="<%=shotsInfo.img%>">
  18. <% }else{%>
  19. <img class="center height240" data-img="<%=shotsInfo.originImg%>" src="<%=shotsInfo.img%>">
  20. <img class="shotsMainShotsVideo video cursor" data-video="<%=shotsInfo.video%>" data-status="<%=shotsInfo.video_file_status%>" src="<%=public_path%>/img/play_video.png">
  21. <% }%>
  22. </div>
  23. </div>
  24. <div class="shotsDetailsContent"><%=shotsInfo.content%></div>
  25. <div id="tabs-container" class="shotsDetailsLikeList" style="margin: 0px;">
  26. <ul class="newtabs-menu ">
  27. <a href="/broadcast/shots/shotsDetailsLike?id=<%=shotsInfo.id%>">
  28. <li class="Pending current shotsDetailsLikeListTable">
  29. <span>LIKE </span>
  30. (<span style="margin-left: 0px;" class="pendingNoRead"><%=shotsInfo.like_num%></span>)
  31. </li>
  32. <div class="PendingImg current"></div>
  33. </a>
  34. <a href="/broadcast/shots/shotsDetailsComment?id=<%=shotsInfo.id%>">
  35. <li class="Pending shotsDetailsLikeListTable">
  36. <span>COMMENT </span>
  37. (<span style="margin-left: 0px;" class="pendingNoRead"><%=shotsInfo.comment_num%></span>)
  38. </li>
  39. <div class="PendingImg"></div>
  40. </a>
  41. </ul>
  42. <div class="shotsDetailsList">
  43. <ul>
  44. <%if(likeList.length > 0){%>
  45. <% var i = 1; for(var data of likeList){%>
  46. <li>
  47. <img src="<%=data.avatar_img%>">
  48. <div class="shotsDetailsListLike" <%if(shotsInfo.like_num <= 5 && i==likeList.length){%>style="border-bottom: 0px;"<%}%> >
  49. <span style="color: #6684FF;"><%=data.nick_name%></span> likes your shot.
  50. <span class="shotsDetailsListLikeTime localTime" data-time="<%=data.add_time%>"></span>
  51. </div>
  52. </li>
  53. <% i++;}%>
  54. <%}else{%>
  55. <div class="shotsNoData">No likes at the moment.</div>
  56. <%}%>
  57. </ul>
  58. <%if(shotsInfo.like_num > 5){%>
  59. <div id="page" class="pagenation"></div>
  60. <%}%>
  61. </div>
  62. </div>
  63. </div>
  64. </div>
  65. <!-- right content end -->
  66. </div>
  67. <script>
  68. $(function(){
  69. //查看视频
  70. $('.video').on('click', function(){
  71. var videoUrl = $(this).attr('data-video');
  72. var status = $(this).attr('data-status');
  73. if(status == 1){
  74. parent.layer.open({
  75. type: 2,
  76. title: '',
  77. closeBtn: 0,
  78. resize: false,
  79. area : ['640px', '519px'],
  80. content: '/broadcast/shotsLayer/playVideo?videoUrl='+videoUrl
  81. });
  82. }else{
  83. parent.layer.open({
  84. type: 2,
  85. title: '',
  86. closeBtn: 0,
  87. resize: false,
  88. area : ['640px', '522px'],
  89. content: '/broadcast/shotsLayer/playError'
  90. });
  91. }
  92. })
  93. //查看图片
  94. var showOriginal = 0;
  95. $('.showOriginal').on('click', function(){
  96. if(showOriginal) {
  97. return false;
  98. }
  99. showOriginal = 1;
  100. var img = $(this).attr('data-img');
  101. var image = new Image();
  102. image.src = img;
  103. image.onload = function(){
  104. var width = image.width;
  105. var height = image.height;
  106. width = width*0.9;
  107. height = height*0.9;
  108. var windowHeigth = $(parent).height();
  109. var windowWidth = $(parent).width();
  110. var imgHeigth = '';
  111. var imgWidth = '';
  112. if(windowHeigth < height){
  113. windowHeigth = parseInt(windowHeigth * 0.6);
  114. windowWidth = parseInt(windowWidth * 0.6);
  115. height = windowHeigth;
  116. width = windowWidth;
  117. imgHeigth = windowHeigth;
  118. imgWidth = windowWidth;
  119. }else{
  120. imgHeigth = height;
  121. imgWidth = width;
  122. }
  123. width = width + 20 + 'px';
  124. height = height + 50 + 'px';
  125. parent.layer.open({
  126. type: 2,
  127. title: '',
  128. closeBtn: 0,
  129. resize: false,
  130. shadeClose: true,
  131. area : [width, height],
  132. content: '/broadcast/shotsLayer/showOriginal?img='+img+'&width='+imgWidth+'&height='+imgHeigth,
  133. end:function(){
  134. showOriginal = 0;
  135. }
  136. });
  137. }
  138. })
  139. localTime();//显示本地时间
  140. //分页
  141. var pages = Math.ceil('<%=shotsInfo.like_num%>'/'<%=step%>');
  142. if(pages>1) {
  143. page('page', pages);
  144. }
  145. })
  146. </script>