문의 이미지 팝업 추가

src/main/webapp/WEB-INF/views/web/callcenter/OneToOneQnaFormWeb.html

@@ -87,6 +87,30 @@
 	</div>
 	<!-- // container -->
 	
+	<!-- 문의 이미지 팝업 -->
+	<div class="modal fade cs_pop contact_img_pop" id="contactImgPop" tabindex="-1" role="dialog" aria-labelledby="contactImgLabel" aria-hidden="true">
+		<div class="modal-dialog" role="document">
+			<div class="modal-content">
+				<div class="modal-header sr-only">
+					<h5 class="modal-title" id="contactImgLabel">이미지 상세보기</h5>
+				</div>
+				<div class="modal-body">
+					<div class="pop_cont">
+ 						<div class="swiper-container">
+							<div class="swiper-wrapper">
+								<!-- 이미지 슬라이드 영역 -->
+							</div>
+						</div>
+						<div class="swiper-button-next"></div>
+						<div class="swiper-button-prev"></div>
+						<div class="swiper-pagination"></div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+	<!-- //문의 이미지 팝업 -->
+	
 	<form id="qnaForm" name="qnaForm" action="#" th:action="@{'/callcenter/onetoone/qna/list'}">
 		<input type="hidden" name="pageNo" value ="1"/>
 		<input type="hidden" name="pageSize" value ="10"/>
@@ -95,6 +119,42 @@
 <script src="/ux/plugins/gaga/gaga.paging.js"></script>
 <script th:inline="javascript">
 /*<![CDATA[*/
+	//슬라이드 - 문의 이미지 팝업
+	var contactPopSwiper = new Swiper('.cs_pop.contact_img_pop .swiper-container', {
+		navigation: {
+			nextEl: '.cs_pop.contact_img_pop .swiper-button-next',
+			prevEl: '.cs_pop.contact_img_pop .swiper-button-prev',
+		},
+		pagination: {
+			el: '.cs_pop.contact_img_pop .swiper-pagination',
+			clickable: true,
+		},
+		observer:true,
+		observeParents: true,
+	});
+	
+	// 팝업 - 문의 이미지 슬라이드
+	$(document).on('click','.contactUs .img_group .thumb_pic',function(e){
+		$("#contactImgPop .swiper-wrapper").empty();
+
+		var popSlideIndex = $(this).index();
+		contactPopSwiper.slideTo(popSlideIndex);
+		contactPopSwiper.update();
+
+		var contactImglength = $('.contactUs .img_group .thumb_pic').length;
+		var popImgHtml = "";
+		for (i = 1; i <= contactImglength; i++) {
+			var contactImg = $(this).find('img');
+			var contactImgSrc = $('.img_group .thumb_pic:nth-child('+i+') img').attr('src');
+			popImgHtml += "<div class='swiper-slide'><div class='pop_img' style='background-image:url("+ contactImgSrc +")'></div></div>";
+		}
+
+		$("#contactImgPop .swiper-wrapper").append(popImgHtml);
+		$('#contactImgPop').modal("show");
+		
+		return false;
+	});
+	
 	$(document).ready(function() {
 		// 고객센터 LNB 설정
 		fnSetCallcenterLnb(2);

src/main/webapp/WEB-INF/views/web/callcenter/OneToOneQnaRegisterFormWeb.html

@@ -84,8 +84,8 @@
 													<div class="imgUpload">
 														<label for="fileAdd" class="fileAdd">첫번째업로드</label>
 														<input type="file" id="fileAdd" name="file1"/>
-														<input type="hidden" name="fileAddOrgFileNm"/>
-														<input type="hidden" name="fileAddSysFileNm"/>
+														<input type="hidden" name="file1OrgFileNm"/>
+														<input type="hidden" name="file1SysFileNm"/>
 													</div>
 													<div class="imgUpload">
 														<label for="fileAdds" class="fileAdd">두번째업로드</label>

src/main/webapp/WEB-INF/views/web/common/fragments/HeadWeb.html

@@ -28,11 +28,14 @@
 	<link rel="stylesheet" type="text/css" th:href="@{'/ux/pc/css/common.css?v=' + ${#calendars.format(#calendars.createNow(), 'yyyyMMddHHmmss')}}" href="/ux/pc/css/common.css"/>
 	<link rel="stylesheet" type="text/css" href="/ux/pc/css/jquery-ui.css">
 	<link rel="stylesheet" type="text/css" href="/ux/pc/css/slick.css" />
+	<link rel="stylesheet" type="text/css" href="/ux/pc/css/swiper.min.css" />
 	
-	<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
+	<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
+	<script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>
+	<script src="/ux/pc/js/jquery.modal.min.js"></script>
 	<script src="/ux/pc/js/slick.min.js"></script>
 	<script src="/ux/pc/js/jquery-ui.js"></script>
-	<script src="/ux/pc/js/jquery.modal.min.js"></script>
 	<script src="/ux/pc/js/jquery.ui.datepicker.monthyearpicker.js"></script>
 	<script src="/ux/plugins/jquery.serializeObject.min.js"></script>
 	<script src="/ux/plugins/mcxdialog/mcxdialog_ui.js"></script>