상품상세 팝업, 선택이미지로 이동

src/main/webapp/WEB-INF/views/mob/goods/GoodsDetailFormMob.html

@@ -101,8 +101,9 @@
 											</div>
 										</div>
 									</th:block>
-									<th:block th:each="goodsImg, status : ${goodsImgList}">
-									<div class="swiper-slide" th:if="${ not (#strings.contains(goodsImg.sysImgNm,'_F1') 
+									<th:block th:each="goodsImg, status : ${goodsImgList}" th:with="count=${(videoYn == 'Y')?  (status.count +1): status.count }">
+									<div class="swiper-slide" th:id="${'navLocate'+ count}"
+															  th:if="${ not (#strings.contains(goodsImg.sysImgNm,'_F1') 
 																or #strings.contains(goodsImg.sysImgNm,'_L1')
 																or #strings.contains(goodsImg.sysImgNm,'_L2'))}">
 										<div class="thumb" ><img th:src="${imgGoodsUrl+'/'+goodsImg.sysImgNm+'?RS=1080'}" alt="" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'"></div></div>  <!--  mov -->
@@ -1476,8 +1477,8 @@
 				<a href="javascript:void(0);" id="btn_close_itemThumbPop" onclick="cfCloseLayer('pdItemThumbPop')">닫기버튼</a>
 			</div>
 			<div class="full_pop_container">
-				<th:block th:each="goodsImg, status : ${goodsImgList}">
-				<div id="popThumb2" class="scaleview" th:if="${ not (#strings.contains(goodsImg.sysImgNm,'_F1.') 
+				<th:block th:each="goodsImg, status : ${goodsImgList}" th:with="count=${(videoYn == 'Y')?  (status.count +1): status.count }">
+				<div th:id="${'popThumb'+ count}" class="scaleview" th:if="${ not (#strings.contains(goodsImg.sysImgNm,'_F1.') 
 													or #strings.contains(goodsImg.sysImgNm,'_L1.')
 													or #strings.contains(goodsImg.sysImgNm,'_L2.'))}">
 					<img th:src="${imgGoodsUrl+'/'+goodsImg.sysImgNm+'?RS=1080'}" alt="" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
@@ -2821,7 +2822,11 @@
 		//--상품리뷰 창 순서 -
 		
 		$(document).on('click','.pd_detail .thumb_box .thumb',function(e){
-            $('#pdItemThumbPop').css("display", "block");
+            $("#pdItemThumbPop").show();
+            $('#pdItemThumbPop').scrollTop(0);
+            var thumbIndex = $(this).parent().attr('id').replace("navLocate", "");
+    		var scrollThumbPop = $('#popThumb'+thumbIndex).height() * (thumbIndex-1);
+    		$('#pdItemThumbPop').animate({scrollTop : scrollThumbPop}, 1000);
 			return false;
         })
 

src/main/webapp/WEB-INF/views/web/goods/GoodsDealDetailFormWeb.html

@@ -467,7 +467,7 @@
 						th:if="${ not (#strings.contains(goodsImg.sysImgNm,'_F1.') 
 								or #strings.contains(goodsImg.sysImgNm,'_L1.')
 								or #strings.contains(goodsImg.sysImgNm,'_L2.'))}">
-				<div th:id="${'popThumb1'+ count}" class="scaleview" >
+				<div th:id="${'popThumb'+ count}" class="scaleview" >
 					<img th:src="${imgGoodsUrl+'/'+goodsImg.sysImgNm}" alt="" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'"></div>
 			</th:block>
 			</div>

src/main/webapp/WEB-INF/views/web/goods/GoodsDetailFormWeb.html

@@ -1440,7 +1440,7 @@
 						th:if="${ not (#strings.contains(goodsImg.sysImgNm,'_F1') 
 								or #strings.contains(goodsImg.sysImgNm,'_L1')
 								or #strings.contains(goodsImg.sysImgNm,'_L2'))}">
-				<div th:id="${'popThumb1'+ count}" class="scaleview" >
+				<div th:id="${'popThumb'+ count}" class="scaleview" >
 					<img th:src="${imgGoodsUrl+'/'+goodsImg.sysImgNm}" alt="" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'"></div>
 			</th:block>
 			</div>

src/main/webapp/ux/pc/js/common-ui.js

@@ -547,7 +547,8 @@ $(document).ready( function() {
 	//팝업 - 상품썸네일 크게보기
 	$(document).on('click','.pd_detail .area_pic .thumb_list_wrap ul li a',function(e){
 		$('body').addClass('lock');
-		var thumbIndex = $(this).index() + 1;
+		//var thumbIndex = $(this).index() + 1;
+		var thumbIndex = $(this).parent().attr('id').replace("navLocate", "");
 		var thumbImglength = $('.pd_detail .area_pic .thumb_list_wrap ul li').length;
 		var popThumbImgHtml = "";
 		$("#pdItemThumbPop").show();