OneToOnePhotoFormWeb.html 3.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  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. <!-- 댓글 이미지 팝업 -->
  17. <!-- <div class="modal fade thumb_img_pop" id="thumbImgPop" tabindex="-1" role="dialog" aria-labelledby="thumbImgLabel" aria-hidden="true"> -->
  18. <div class="modal-dialog" role="document">
  19. <div class="modal-content" th:with="frontUrl=${@environment.getProperty('domain.front')}, imgView=${@environment.getProperty('upload.image.view')}">
  20. <div class="modal-header sr-only">
  21. <h5 class="modal-title" id="thumbImgLabel">이미지 상세보기</h5>
  22. </div>
  23. <div class="modal-body">
  24. <div class="pop_cont">
  25. <div class="swiper-container">
  26. <div class="swiper-wrapper">
  27. <!-- 이미지 슬라이드 영역 -->
  28. <th:block th:each="a, stat : ${imgList}">
  29. <div class="swiper-slide">
  30. <div class="pop_img" th:style="${'background-image:url('+imgView+'/'+a.sysFileNm+');'}">
  31. </div>
  32. </div>
  33. </th:block>
  34. </div>
  35. </div>
  36. <div class="swiper-button-next"></div>
  37. <div class="swiper-button-prev"></div>
  38. <div class="swiper-pagination"></div>
  39. </div>
  40. </div>
  41. </div>
  42. </div>
  43. <!-- </div> -->
  44. <!-- //댓글 이미지 팝업 -->
  45. <a href="javascript:void(0);" rel="modal:close" onclick="cfCloseLayer('layer_review_photo')" class="close-modal">Close</a>
  46. <script th:inline="javascript">
  47. $(document).ready( function() {
  48. let attchSq = 0;
  49. let img = [[${imgList[1].sysFileNm}]];
  50. if (!gagajf.isNull( [[${counsel.rnum}]])){
  51. attchSq = [[${counsel.rnum}]]-1;
  52. }
  53. if (!gagajf.isNull(img)) {
  54. var contactPopSwiper = new Swiper('.thumb_img_pop .swiper-container', {
  55. navigation: {
  56. nextEl: '.thumb_img_pop .swiper-button-next',
  57. prevEl: '.thumb_img_pop .swiper-button-prev',
  58. },
  59. pagination: {
  60. el: '.thumb_img_pop .swiper-pagination',
  61. clickable: true,
  62. },
  63. observer:true,
  64. observeParents: true,
  65. });
  66. contactPopSwiper.slideTo(attchSq, 0, false);
  67. contactPopSwiper.update();
  68. }
  69. else{
  70. $(".swiper-pagination").append('<span class="swiper-pagination-bullet swiper-pagination-bullet-active" tabindex="0" role="button" aria-label="Go to slide 1"></span>');
  71. $(".swiper-pagination").addClass("swiper-pagination-clickable swiper-pagination-bullets");
  72. $(".swiper-button-next").addClass("swiper-button-disabled");
  73. $(".swiper-button-prev").addClass("swiper-button-disabled");
  74. }
  75. });
  76. /*<![CDATA[*/
  77. /*]]>*/
  78. </script>
  79. </html>