PlanningReplyPhotoFormMob.html 2.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  1. <!DOCTYPE html>
  2. <html lang="ko" xmlns:th="http://www.thymeleaf.org">
  3. <!--
  4. *******************************************************************************
  5. * @source : GoodsReviewPhotoFormMob.html
  6. * @desc : 상품평 - 포토/영상 리스트 팝업
  7. *============================================================================
  8. * STYLE24
  9. * Copyright(C) 2020 TSIT, All rights reserved.
  10. *============================================================================
  11. * VER DATE AUTHOR DESCRIPTION
  12. * === =========== ========== =============================================
  13. * 1.0 2021.04.008 eskim 최초 작성
  14. *******************************************************************************
  15. -->
  16. <div class="modal-dialog" role="document">
  17. <div class="modal-content" th:with="imageUrl=${@environment.getProperty('upload.image.view')}">
  18. <div class="modal-header">
  19. <h5 class="modal-title" id="comment_popup">포토 댓글</h5>
  20. </div>
  21. <div class="modal-body">
  22. <div class="pop_cont">
  23. <div class="pop_slide">
  24. <div class="swiper-container">
  25. <div class="swiper-wrapper">
  26. <th:block th:each="a, stat : ${replyAttachList}">
  27. <div class="swiper-slide">
  28. <div class="img">
  29. <img th:src="${imageUrl + a.sysFileNm}">
  30. </div>
  31. </div>
  32. </th:block>
  33. </div>
  34. </div>
  35. <!-- Add Pagination -->
  36. <div class="swiper-pagination"></div>
  37. </div>
  38. <div class="pop_detail">
  39. <button class="pop_open_btn">
  40. <span class="sr-only"></span>
  41. </button>
  42. <!-- 210414_추가 : comment_wrap 태그 추가. -->
  43. <th:block th:each="a, stat : ${replyList}">
  44. <div class="comment_wrap">
  45. <div class="review_p" th:text=${a.entryVal1}></div>
  46. <div class="comment_writer">
  47. <span class="writer" th:text="${a.maskingCustId}"></span> <span class="date" th:text="${a.entryDt}">2020.12.30</span>
  48. </div>
  49. </div>
  50. </th:block>
  51. <!-- //210414_추가 : comment_wrap 태그 추가. -->
  52. </div>
  53. </div>
  54. </div>
  55. </div>
  56. </div>
  57. <a href="javascript:void(0);" rel="modal:close"
  58. onclick="cfCloseLayer('photo_full_popup')" class="close-modal">Close</a>
  59. <script th:inline="javascript">
  60. /* 210414_추가 : swiper fraction 숫자 1자리수 일때 앞에 0 스크립트 추가 */
  61. /*<![CDATA[*/
  62. $(document).ready( function() {
  63. let replyAttchSq = 0;
  64. if (!gagajf.isNull( [[${plan.attachSq}]])){
  65. replyAttchSq = [[${plan.attachSq}]];
  66. }
  67. $(document).on('click','.pop_open_btn',function(){
  68. $('.modal.photo_comment_popup .pop_detail').toggleClass('active');
  69. });
  70. var photoreplydetailSwiper = new Swiper('.pop_slide .swiper-container', {
  71. observer: true,
  72. observeParents: true,
  73. slidesPerView: 1,
  74. pagination: {
  75. el: '.swiper-pagination',
  76. type: 'fraction',
  77. },
  78. });
  79. photoreplydetailSwiper.slideTo(replyAttchSq, 0, false);
  80. photoreplydetailSwiper.update();
  81. });
  82. /*]]>*/
  83. </script>
  84. </html>