모바일 상품상세 -동영상관련 수정

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

@@ -54,46 +54,41 @@
 										<div class="swiper-slide">
 											<div class="movbox">
 												<th:block th:if="${goodsVideo.videoGb == 'Y'}">
-												<!-- <iframe width="100%" height="100%" th:src="${'https://www.youtube.com/embed/'+goodsVideo.kmcKey+'?rel=0&autoplay=1&mute=1'}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> -->
-												<div id="utbplayer"></div>
-														<script src="https://www.youtube.com/iframe_api"></script><!-- 아래 원문에서 복잡하게 기술되었던 부분 -->
-														<script th:inline="javascript">
-														/*<![CDATA[*/
-														  var player;
-														
-														  function onYouTubeIframeAPIReady(){
-														
-														    player = new YT.Player('utbplayer',{
-														
-														      width:'100%',
-														
-														      videoId:[[${goodsVideo.kmcKey}]],
-														
-														      playerVars:{'autoplay':1,'playsinline':1},
-														
-														      events:{ 'onReady':onPlayerReady,
-														    	  	'onStateChange': onPlayerStateChange
-																	}
-														    });
-														  }
-														
-														  function onPlayerReady(e){
-														    e.target.mute();
-														    e.target.playVideo();
-														  }
-														  
-														  var done = false;
-														  function onPlayerStateChange(event) {
-														    if (event.data == YT.PlayerState.PLAYING && !done) {
-														      setTimeout(stopVideo, 6000);
-														      done = true;
-														    }
-														  }
-														  function stopVideo() {
-														    player.stopVideo();
-														  }
-														/*]]>*/
-														</script>
+												<iframe width="100%" height="100%" th:src="${'https://www.youtube.com/embed/'+goodsVideo.kmcKey+'?rel=0'}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+											<!-- <div id="utbplayer"></div>
+													<script src="https://www.youtube.com/iframe_api"></script>아래 원문에서 복잡하게 기술되었던 부분
+													<script th:inline="javascript">
+													/*<![CDATA[*/
+													  var player;
+													  function onYouTubeIframeAPIReady(){
+													    player = new YT.Player('utbplayer',{
+													      width:'100%',
+													      videoId:[[${goodsVideo.kmcKey}]],
+													      playerVars:{'autoplay':1,'playsinline':1},
+													      events:{ 'onReady':onPlayerReady,
+													    	  	'onStateChange': onPlayerStateChange
+																}
+													    });
+													  }
+													
+													  function onPlayerReady(e){
+													    e.target.mute();
+													    e.target.playVideo();
+													  }
+													  
+													  var done = false;
+													  function onPlayerStateChange(event) {
+													    if (event.data == YT.PlayerState.PLAYING && !done) {
+													      setTimeout(stopVideo, 6000);
+													      done = true;
+													    }
+													  }
+													  function stopVideo() {
+													    player.stopVideo();
+													  }
+													/*]]>*/
+													</script> -->
 												</th:block>
 												<th:block th:unless="${goodsVideo.videoGb == 'Y'}">
 												<button id="prodMovBtn" type="button" class="btn_play" data-setplay="play">동영상보기</button>
@@ -111,6 +106,9 @@
 								</div>
 								<!-- Add Pagination -->
 								<div class="swiper-pagination"></div>
+								<!-- 210728_ 수정 : 팝업 좌우버튼 추가. -->
+								<div class="swiper-button-next"></div>
+								<div class="swiper-button-prev"></div>
 							</div>
 						</div>
 					</div>
@@ -2610,14 +2608,46 @@
 		});
 		
 		//슬라이드 - 제품사진
-		var thumbswiper = new Swiper('.pd .thumb_box .area_slider .swiper-container', {
+		//210728_ 추가 : 네비게이션 버튼 추가 및 썸네일 영상일 경우, navigation 버튼 노출/비노출 설정.
+			//슬라이드 - 제품사진
+			var thumbswiper = new Swiper('.pd .thumb_box .area_slider .swiper-container', {
+				slidesPerView:1,
+				speed: 1000,
+				a11y: {
+					enabled: true,
+					notificationClass: 'swiper-notification',
+					prevSlideMessage: '이전 슬라이드',
+					nextSlideMessage: '다음 슬라이드',
+					firstSlideMessage: '첫번째 슬라이드 입니다',
+					lastSlideMessage: '마지막 슬라이드 입니다',
+					paginationBulletMessage: '슬라이드 {{index}}로 이동',
+				},
+				pagination: {
+					el: '.swiper-pagination',
+					type: 'fraction',
+				},
+				navigation: {
+					nextEl: ".pd .thumb_box .area_slider .swiper-button-next",
+					prevEl: ".pd .thumb_box .area_slider .swiper-button-prev",
+				},
+				on : {
+					slideChangeTransitionEnd : function(){
+						if($('.thumb_list .swiper-slide-active iframe').length){
+							$('.pd_detail .thumb_box .swiper-button-next, .pd_detail .thumb_box .swiper-button-prev').show();
+						}else{
+							$('.pd_detail .thumb_box .swiper-button-next, .pd_detail .thumb_box .swiper-button-prev').hide();
+						}
+					}
+				}
+			});
+		/* var thumbswiper = new Swiper('.pd .thumb_box .area_slider .swiper-container', {
 			slidesPerView:1,
 			speed: 1000,
 			pagination: {
 				el: '.swiper-pagination',
 				type: 'fraction',
 			},
-		});
+		}); */
 				
 
 		//슬라이드 - STYLE24의 스타일링 추천