common-ui.js 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720
  1. /* *******************************************
  2. [1][ prefix ]
  3. uifn_
  4. [2][ index ]
  5. 1. Variables (전역변수)
  6. 2. Init (초기설정)
  7. 3. Utility (유틸리티)
  8. 4. Custom (라이브러리 커스텀)
  9. 5. Content (컨텐츠)
  10. [3][ update ]
  11. 2020.12.02 FOOT area - popup, family site, scrollTop
  12. 2020.12.10 FORM - check-All, input-File-Add, Select Custom
  13. ******************************************* */
  14. /* * * * * * * * * * * * * * * * * * * * * *
  15. (1) Variables (전역변수)
  16. * * * * * * * * * * * * * * * * * * * * * */
  17. /* * * * * * * * * * * * * * * * * * * * * * *
  18. 2. Init (초기설정)
  19. * * * * * * * * * * * * * * * * * * * * * */
  20. $(document).ready(function(){
  21. // history back
  22. $(".back").on("click", function () {
  23. history.back()
  24. });
  25. // header minify
  26. $(function(){
  27. $(window).scroll(function(){
  28. //var scroll = $(this).scrollTop();
  29. var headerH = $('.common_header > .hd_top_banner').outerHeight() + $('.common_header > .area').outerHeight();
  30. var miniGnbH = $('.common_header > .gnb').outerHeight();
  31. if ($(window).scrollTop() >= headerH){
  32. //header minify
  33. $("header").addClass("minify");
  34. $("#container").css("padding-top",miniGnbH);
  35. }
  36. else {
  37. //header minify
  38. $("header").removeClass("minify");
  39. $("#container").css("padding-top","0px");
  40. }
  41. });
  42. });
  43. // items like on/off
  44. $(function(){
  45. $(".itemLike").click(function () {
  46. $(this).toggleClass("likeit");
  47. });
  48. });
  49. });
  50. /* * * * * * * * * * * * * * * * * * * * * * *
  51. 3. Utility (유틸리티)
  52. * * * * * * * * * * * * * * * * * * * * * */
  53. // FORM
  54. // input-File-Add
  55. $(document).ready(function() {
  56. if (window.File && window.FileList && window.FileReader) {
  57. $("#fileAdd").on("change", function(e) {
  58. var files = e.target.files,
  59. filesLength = files.length;
  60. console.log(filesLength);
  61. var cmtLa = $('.cmt .cmt_thumb .form_field .imgUpload label');
  62. var cmtIn = $('.cmt .cmt_thumb .form_field .imgUpload input');
  63. for (var i = 0; i < filesLength; i++) {
  64. var f = files[i]
  65. var fileReader = new FileReader();
  66. fileReader.onload = (function(e) {
  67. var file = e.target;
  68. $("<span class=\"pics\">" +
  69. "<img class=\"picsThumbs\" src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" +
  70. "<br/><span class=\"removes\">Removes image</span>" +
  71. "</span>").insertAfter("#fileAdd");
  72. $(".removes").click(function(){
  73. $(this).parent(".pics").remove();
  74. cmtLa.css('display', 'block');
  75. cmtIn.css('display', 'block');
  76. $('#fileAdd').removeAttr("disabled");
  77. });
  78. });
  79. fileReader.readAsDataURL(f);
  80. var maxFileLength = 10; /* 최대 파일 갯수를 입력해 주세요 */
  81. var imgFiles=$('.imgUpload .pics');
  82. var cmtLa = $('.cmt .cmt_thumb .form_field .imgUpload label');
  83. var cmtIn = $('.cmt .cmt_thumb .form_field .imgUpload input');
  84. if (imgFiles.length >= maxFileLength-1) {
  85. mcxDialog.alert('이미지는 최대' + maxFileLength +'장 까지 첨부 가능합니다.'); //210420_수정 : 시스템 alert -> dialog 변경.
  86. $('#fileAdd').attr("disabled",true);
  87. cmtLa.css('display', 'none');
  88. cmtIn.css('display', 'none');
  89. } else if(imgFiles.length < maxFileLength){
  90. $('#fileAdd').removeAttr("disabled");
  91. }
  92. }
  93. });
  94. } else {
  95. alert("브라우저가 File API를 지원하지 않습니다.")
  96. }
  97. });
  98. // input-File-Adds
  99. $(document).ready(function() {
  100. if (window.File && window.FileList && window.FileReader) {
  101. $("#fileAdds").on("change", function(e) {
  102. var files = e.target.files,
  103. filesLength = files.length;
  104. for (var i = 0; i < filesLength; i++) {
  105. var f = files[i]
  106. var fileReader = new FileReader();
  107. fileReader.onload = (function(e) {
  108. var file = e.target;
  109. $("<span class=\"pics\">" +
  110. "<img class=\"picsThumbs\" src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" +
  111. "<br/><span class=\"removes\">Removes image</span>" +
  112. "</span>").insertAfter("#fileAdds");
  113. $(".removes").click(function(){
  114. $(this).parent(".pics").remove();
  115. });
  116. });
  117. fileReader.readAsDataURL(f);
  118. }
  119. });
  120. } else {
  121. alert("브라우저가 File API를 지원하지 않습니다.")
  122. }
  123. });
  124. // check-All
  125. $( document ).ready(function() {
  126. var $chkAll = $('.check-all');
  127. $chkAll.change(function () {
  128. var checked = $(this).prop('checked');
  129. $('input[name="dd"]').prop('checked', checked);
  130. });
  131. var ddChk = $('input[name="dd"]');
  132. ddChk.change(function () {
  133. var ddChkLength = ddChk.length;
  134. var checkedLength = $('input[name="dd"]:checked').length;
  135. var selectAll = (ddChkLength == checkedLength);
  136. $chkAll.prop('checked', selectAll);
  137. });
  138. });
  139. //Select Custom
  140. $( document ).ready(function() {
  141. $('select').each(function(){
  142. var $this = $(this), numberOfOptions = $(this).children('option').length;
  143. $this.addClass('select_hidden');
  144. $this.wrap('<div class="select"></div>');
  145. $this.after('<div class="select_dress"></div>');
  146. var $dressSelect = $this.next('div.select_dress');
  147. $dressSelect.text($this.children('option').eq(0).text());
  148. var $selList = $('<ul />', {
  149. 'class': 'select_options'
  150. }).insertAfter($dressSelect);
  151. for (var i = 0; i < numberOfOptions; i++) {
  152. $('<li />', {
  153. text: $this.children('option').eq(i).text(),
  154. rel: $this.children('option').eq(i).val(),
  155. class: $this.children('option').eq(i).attr('disabled')
  156. }).appendTo($selList);
  157. }
  158. var $selListItems = $selList.children('li');
  159. $dressSelect.click(function(e) {
  160. e.stopPropagation();
  161. $('div.select_dress.active').not(this).each(function(){
  162. $(this).removeClass('active').next('ul.select_options').hide();
  163. });
  164. $(this).toggleClass('active').next('ul.select_options').toggle();
  165. });
  166. $selListItems.click(function(e) {
  167. e.stopPropagation();
  168. if($(this).hasClass('disabled')){
  169. $this.val($(this).attr('rel',false));
  170. }
  171. else{
  172. $dressSelect.text($(this).text()).removeClass('active');
  173. $this.val($(this).attr('rel'));
  174. $selList.hide();
  175. }
  176. });
  177. $(document).click(function() {
  178. $dressSelect.removeClass('active');
  179. $selList.hide();
  180. });
  181. });
  182. });
  183. // Select-Combo-Custom
  184. function sCombo(selector){
  185. this.$selectBox = null,
  186. this.$select = null,
  187. this.$list = null,
  188. this.$listLi = null;
  189. sCombo.prototype.init = function(selector){
  190. this.$selectBox = $(selector);
  191. this.$select = this.$selectBox.find('.combo .select');
  192. this.$list = this.$selectBox.find('.combo .list');
  193. this.$listLi = this.$list.children('li');
  194. }
  195. sCombo.prototype.initEvent = function(e){
  196. var that = this;
  197. this.$select.on('click', function(e){
  198. that.listOn();
  199. });
  200. this.$listLi.on('click', function(e){
  201. that.listSelect($(this));
  202. });
  203. $(document).on('click', function(e){
  204. that.listOff($(e.target));
  205. });
  206. }
  207. sCombo.prototype.listOn = function(){
  208. this.$selectBox.toggleClass('on');
  209. if(this.$selectBox.hasClass('on')){
  210. this.$list.css('display', 'block');
  211. }else{
  212. this.$list.css('display', 'none');
  213. };
  214. }
  215. sCombo.prototype.listSelect = function($target){
  216. $target.addClass('selected').siblings('li').removeClass('selected');
  217. this.$selectBox.removeClass('on');
  218. //this.$select.text($target.text());
  219. this.$select.html($target.html());
  220. this.$list.css('display', 'none');
  221. }
  222. sCombo.prototype.listOff = function($target){
  223. if(!$target.is(this.$select) && this.$selectBox.hasClass('on')){
  224. this.$selectBox.removeClass('on');
  225. this.$list.css('display', 'none');
  226. };
  227. }
  228. this.init(selector);
  229. this.initEvent();
  230. };
  231. // selectBrand on/off
  232. $( document ).ready( function() {
  233. $("#selectBrand .brandbox input").on("click", function() {
  234. $("#selectBrand .brandbox input").removeClass("on");
  235. $(this).addClass("on");
  236. });
  237. });
  238. // dropDownMenu
  239. $(document).on('click','.tgl_dropdown',function(e){
  240. $(this).next('.dropdown_menu').slideToggle(300);
  241. $(this).toggleClass('on');
  242. return false;
  243. });
  244. /* alert */
  245. $(function(){
  246. $('.alertCls').click(function(){
  247. setTimeout(function(){
  248. $('.alert').css('animation', 'none');
  249. $('.alert').css('display', 'none');
  250. }, 300);
  251. // uifn_currCallback();
  252. });
  253. });
  254. /* * * * * * * * * * * * * * * * * * * * * * *
  255. 4. Custom (라이브러리 커스텀)
  256. * * * * * * * * * * * * * * * * * * * * * */
  257. $( document ).ready(function() {
  258. //datepicker
  259. $.datepicker.regional['kr'] = {
  260. dateFormat: 'yy-mm-dd' // 날짜 포맷 설정
  261. };
  262. $.datepicker.setDefaults($.datepicker.regional['kr']);
  263. });
  264. /* * * * * * * * * * * * * * * * * * * * * * *
  265. 5. Content (컨텐츠)
  266. * * * * * * * * * * * * * * * * * * * * * */
  267. $(document).ready( function() {
  268. $(function(){
  269. if($(".content").hasClass("dp_hotdeal") || $(".content").hasClass("dp_Bulletship")){
  270. $('.container').closest('div').addClass('omitt');
  271. }
  272. });
  273. //LNB_상품리스트 카테고리
  274. $(document).on('click','.lnb .lnb_category ul li a',function(e){
  275. $(this).toggleClass('on');
  276. $(this).parent('li').siblings('li').children('a').removeClass('on');
  277. $(this).parent('li').siblings('li').removeClass('on');
  278. $(this).parent('li').siblings('li').find('a').removeClass('on');
  279. $(this).parent('li').toggleClass('on');
  280. $(this).parent('li').siblings('li').find('.sub_cate').hide();
  281. $(this).parent('li').children(".sub_cate").toggle();
  282. });
  283. /* 고객센터_accordion */
  284. /* 210428_수정 : 아코디언 */
  285. $(document).on('click','.cs .foldGroup .fold_head',function(){
  286. $(this).toggleClass('on');
  287. $(this).siblings('.fold_cont').slideToggle(100);
  288. $(this).parents('li').siblings('li').find('.fold_head').removeClass('on');
  289. $(this).parents('li').siblings('li').find('.fold_cont').slideUp(100);
  290. });
  291. /* //210428_수정 : 아코디언 */
  292. /* 주문결제_accordion */
  293. /* 210428_수정 : 아코디언 */
  294. $(document).on('click','.od .foldGroup .fold_head .fold_tit',function(e){
  295. //$(this).parents('.foldGroup li').find('.fold_cont').slideToggle(100);
  296. //$(this).parents('.fold_head').toggleClass('on');
  297. $(this).parents('.fold_head').toggleClass('on');
  298. $(this).parents('.foldGroup li').find('.fold_cont').slideToggle(100);
  299. $(this).parents('li').siblings('li').find('.fold_head').removeClass('on');
  300. $(this).parents('li').siblings('li').find('.fold_cont').slideUp(100);
  301. return false;
  302. }).on('click','.od .foldGroup .fold_paymethod .fold_head .fold_tit',function(e){
  303. $("#rdi-paymethod-quick").trigger("click");
  304. return false;
  305. });
  306. /* //210428_수정 : 아코디언 */
  307. /* 아이디/비밀번호 찾기_accordion:open */
  308. $(document).on('click','.mb .foldGroup.checkcase .fold_head',function(e){
  309. $(this).parents('.foldGroup li').find('.fold_cont').slideDown(100);
  310. $(this).addClass('on');
  311. $('.foldGroup.checkcase .fold_head').not(this).removeClass('on').next('.fold_cont').slideUp(100);
  312. return false;
  313. });
  314. /* 아이디/비밀번호 찾기_accordion:close */
  315. $(document).on('click','.mb .foldGroup.checkcase .fold_head.on',function(e){
  316. $(this).removeClass('on');
  317. $(this).next('.fold_cont').slideUp(100);
  318. return false;
  319. });
  320. /* 아이디/비밀번호 찾기_taps */
  321. $(document).on('click','.registration_nav ul li',function(e){
  322. $('.foldGroup.checkcase .fold_head').removeClass('on').next('.fold_cont').hide();
  323. $(this).addClass('active').siblings().removeClass('active');
  324. $('.registration_tap .form_group').hide();
  325. $('.registration_tap .form_group').eq($(this).index()).show();
  326. return false;
  327. });
  328. /* 전시 팝업 샘플팝업1 : 수정예정 */
  329. $(document).on('click','#coupon_pop',function(e){
  330. $("#coupon_modal_01").modal("show");
  331. return false;
  332. });
  333. /* 전시 팝업 샘플팝업2 : 수정예정 */
  334. $(document).on('click','#coupon_pop2',function(e){
  335. $("#coupon_modal_02").modal("show");
  336. return false;
  337. });
  338. /* 같은 데이터 노출시 동일 영역끼리 병합 */
  339. $(".merge_row").each(function() {
  340. var txtcont = $(this).text();
  341. var rows = $(this).parents("table").find(".merge_row:contains('" + txtcont + "')");
  342. if (rows.length > 1) {
  343. rows.eq(0).attr("rowspan", rows.length);
  344. rows.not(":eq(0)").remove();
  345. }
  346. rows.eq(0).parent('tr').attr('class', 'bundle_row');
  347. });
  348. /* 드래그 스크롤 : 수정 예정 */
  349. var x,left,down;
  350. $(".bullet_sticky_nav ul").mousedown(function(e){
  351. e.preventDefault();
  352. down = true;
  353. x = e.pageX;
  354. left = $(this).scrollLeft();
  355. });
  356. $("body").mousemove(function(e){
  357. if(down){
  358. var newX = e.pageX;
  359. $(".bullet_sticky_nav ul").scrollLeft(left - newX + x);
  360. }
  361. });
  362. $("body").mouseup(function(e){down = false;});
  363. /* //드래그 스크롤 : 수정 예정 */
  364. /* 상품리스트 sticky_nav_header */
  365. $(function(){
  366. /* 스크롤시 효과 */
  367. $(window).scroll(function(){
  368. var windScroll = $(window).scrollTop();
  369. var miniGnbH = $('.common_header .gnb').outerHeight();
  370. var stickyTopNavH = $('.common_header .gnb').outerHeight();
  371. var navOffsetTop = $('.sticky_nav_list').size() ? $('.sticky_nav_list').offset().top : 0;
  372. var navOffsetBottom = navOffsetTop + $('.list_content').outerHeight();
  373. var arr = [];
  374. if (windScroll > navOffsetTop){
  375. $('.sticky_nav_list').css('padding-top',stickyTopNavH);
  376. $(".sticky_nav").addClass("sticky");
  377. } else {
  378. $('.sticky_nav_list').css('padding-top','0px');
  379. $(".sticky_nav").removeClass("sticky");
  380. }
  381. if(windScroll > navOffsetBottom) {
  382. $('.sticky_nav_list').css('padding-top','0px');
  383. $(".sticky_nav").removeClass("sticky");
  384. }
  385. $(".list_content > div").each(function(i){
  386. var obj = {};
  387. obj.KEY = i;
  388. obj.VALUE = $(this).offset().top;
  389. arr.push(obj);
  390. });
  391. $('.sticky_nav li').find('a').removeClass('active');
  392. $.each(arr, function(index, item) {
  393. if(windScroll < item.VALUE) {
  394. $('.sticky_nav li').eq(item.KEY).find('a').addClass('active');
  395. return false;
  396. }
  397. });
  398. });
  399. /* 상품리스트 sticky_nav_link */
  400. $(".sticky_nav li a").on("click", function(){
  401. var hookHeader = $(".sticky_nav").outerHeight();
  402. var hookHref = $(this).attr("href");
  403. //var hookPot = $(hookHref == "#" || hookHref == "" ? "body" : hookHref);
  404. var hookPot = $(hookHref);
  405. var hookPos = hookPot.offset().top - hookHeader;
  406. $("html, body").animate({scrollTop: hookPos}, 300);
  407. $('.sticky_nav li a').removeClass('active');
  408. $(this).addClass('active');
  409. });
  410. });
  411. //상품 리스트_필터
  412. $('.filter_list ul li').click(function(){
  413. $(".filter_list ul li").removeClass('on');
  414. $(".dp_list .sort, .sch_result .sort").removeClass('on');
  415. $(this).addClass('on');
  416. $("."+$(this).data('id')).addClass('on');
  417. $('.sort ul li').removeClass('on');
  418. $('.sort ul li div').hide();
  419. $('.container .dp_list .fillter, .container .sch_result .fillter').show();
  420. });
  421. // 카테고리
  422. $('.tap_close').click(function(){
  423. $(this).parent().removeClass('on');
  424. $('.filter_content .sort ul li div').hide();
  425. $('.filter_content .sort ul li, .container .filter_list ul li').removeClass('on');
  426. $('.container .dp_list .sort, .container .sch_result .sort').removeClass('on');
  427. });
  428. });
  429. /* * * * * * * * * * * * * * * * * * * * * * *
  430. 6. Content (상품상세)
  431. * * * * * * * * * * * * * * * * * * * * * */
  432. $(document).ready( function() {
  433. //팝업 - 상품썸네일 크게보기
  434. $(document).on('click','.pd_detail .area_pic .thumb_list_wrap ul li a',function(e){
  435. $('body').addClass('lock');
  436. $("#pdItemThumbPop .full_pop_container").empty();
  437. var thumbIndex = $(this).index() + 1;
  438. var thumbImglength = $('.pd_detail .area_pic .thumb_list_wrap ul li').length;
  439. var popThumbImgHtml = "";
  440. for (i = 1; i <= thumbImglength; i++) {
  441. //var thumbImg = $(this).find('img');
  442. var thumbContentHtml = $('.pd_detail .area_pic .thumb_list_wrap ul li:nth-child('+i+') a .thumb').html();
  443. popThumbImgHtml += "<div id=popThumb"+i+" class='scaleview'>" + thumbContentHtml + "</div>";
  444. }
  445. $("#pdItemThumbPop .full_pop_container").append(popThumbImgHtml);
  446. $("#pdItemThumbPop").show();
  447. var scrollThumbPop = $('#popThumb'+thumbIndex).offset().top;
  448. var currentTop = $(window).scrollTop();
  449. $('#pdItemThumbPop').animate({scrollTop : scrollThumbPop - currentTop}, 1000);
  450. return false;
  451. }).on('click','#btn_close_itemThumbPop, .pd_itemthumb_pop .scaleview img',function(e){
  452. $("#pdItemThumbPop").scrollTop(0);
  453. $("#pdItemThumbPop").hide();
  454. $('body').removeClass('lock');
  455. return false;
  456. });
  457. // 상품 대표설명 > 좌측 상품썸네일 navi, 우측 상품정보 고정
  458. $(window).scroll(function(){
  459. var scrollTop= $(window).scrollTop();
  460. var headerH = $('.common_header > .hd_top_banner').outerHeight() + $('.common_header > .area').outerHeight();
  461. var miniGnbH = $('.common_header > .gnb').outerHeight();
  462. var firstFixed = headerH + miniGnbH;
  463. var thumbListWrap_h = $('.pd_detail .thumb_list_wrap').outerHeight();
  464. var descWrap_h = $('.pd_detail .desc_wrap').outerHeight();
  465. var secondFixed_left = firstFixed + $('.pd_detail').outerHeight() - $('.pd_detail .thumb_nav_wrap').outerHeight();
  466. var secondFixed_right = firstFixed + $('.pd_detail .desc_wrap').outerHeight() - $(window).outerHeight();
  467. var secondFixed_right2 = firstFixed + $('.pd_detail').outerHeight() - $(window).outerHeight();
  468. var pdDetail_t = firstFixed + $('.pd_detail').outerHeight() + 100;
  469. var pdDescWrap_t = pdDetail_t + $('.pd_desc_wrap').outerHeight();
  470. var optionFixed_right = pdDetail_t + $('.pd_desc_wrap').outerHeight() - $('.area_option .opt_wrap').outerHeight();
  471. /* 좌측 상품썸네일 navi 고정 */
  472. if (scrollTop > firstFixed){
  473. $('.pd_detail .area_pic .thumb_nav_wrap').removeClass('fixbottom').addClass('fixtop');
  474. }
  475. else if (scrollTop < firstFixed){
  476. $('.pd_detail .area_pic .thumb_nav_wrap').removeClass('fixtop');
  477. }
  478. if (scrollTop > secondFixed_left){
  479. $('.pd_detail .area_pic .thumb_nav_wrap').removeClass('fixtop').addClass('fixbottom');
  480. }
  481. /* 우측 상품정보 고정 */
  482. if (thumbListWrap_h > descWrap_h && scrollTop > secondFixed_right) {
  483. $('.pd_detail .area_desc .desc_wrap').removeClass('absbottom').addClass('fixbottom');
  484. }
  485. else if (thumbListWrap_h > descWrap_h && scrollTop < secondFixed_right) {
  486. $('.pd_detail .area_desc .desc_wrap').removeClass('fixbottom');
  487. }
  488. if (thumbListWrap_h > descWrap_h && scrollTop > secondFixed_right2) {
  489. $('.pd_detail .area_desc .desc_wrap').removeClass('fixbottom').addClass('absbottom');
  490. }
  491. /* 딜 - 상세정보 탭 고정 */
  492. if (scrollTop > pdDetail_t && scrollTop < pdDescWrap_t){
  493. $('.tab_detail_nav').addClass('fix');
  494. } else {
  495. $('.tab_detail_nav').removeClass('fix');
  496. }
  497. /* 딜 - 우측옵션 고정 */
  498. if (scrollTop > pdDetail_t){
  499. $('.area_option .opt_wrap').removeClass('absbottom').addClass('fixtop');
  500. } else if (scrollTop < pdDetail_t) {
  501. $('.area_option .opt_wrap').removeClass('fixtop');
  502. }
  503. if (scrollTop > optionFixed_right){
  504. $('.area_option .opt_wrap').removeClass('fixtop').addClass('absbottom');
  505. }
  506. });
  507. //슬라이드 - 상품 대표설명 > 좌측 상품썸네일 navi
  508. var thumbNavSwiper = new Swiper('.pd_detail .area_pic .thumb_nav_wrap .swiper-container', {
  509. direction: 'vertical',
  510. allowTouchMove: false,
  511. slidesPerView: 6,
  512. slidesPerGroup : 1,
  513. spaceBetween: 10,
  514. navigation: {
  515. nextEl: '.area_pic .thumb_nav_wrap .swiper-button-next',
  516. prevEl: '.area_pic .thumb_nav_wrap .swiper-button-prev',
  517. },
  518. });
  519. //상품 대표설명 > 상품썸네일 1개일때
  520. var thumblist = $('.pd_detail .area_pic .thumb_list_wrap li');
  521. var thumblistLength = thumblist.length;
  522. if (thumblistLength == 1) {
  523. thumblist.parents('.area_pic').addClass('onlyitem');
  524. } else {
  525. thumblist.parents('.area_pic').removeClass('onlyitem');
  526. }
  527. //상품 대표설명 > 좌측 상품썸네일 6개 이하일때
  528. var thumbnavSlide = $('.pd_detail .area_pic .thumb_nav_wrap .swiper-container .swiper-slide');
  529. var thumbnavLength = thumbnavSlide.length;
  530. if (thumbnavLength < 7) {
  531. thumbnavSlide.parents('.thumbnav').addClass('disabled');
  532. } else {
  533. thumbnavSlide.parents('.thumbnav').removeClass('disabled');
  534. }
  535. //상품 대표설명 > 좌측 상품썸네일 navi 선택시 해당 대표 썸네일 위치로 이동
  536. $(document).on('click','.pd_detail .area_pic .thumbnav .swiper-slide a',function(e){
  537. e.preventDefault();
  538. var miniGnbH = $('.common_header > .gnb').outerHeight();
  539. var targetThumb = $($(this).attr('href'));
  540. var topThumb = targetThumb.offset().top - miniGnbH;
  541. $(this).parents('.thumbnav').find('.swiper-slide').removeClass('on');
  542. $(this).parent('.swiper-slide').addClass('on');
  543. targetThumb.siblings('li').removeClass('on');
  544. targetThumb.addClass('on');
  545. $('html,body').animate({scrollTop : topThumb}, 100);
  546. return false;
  547. });
  548. /* 상품상세 > 상품문의 _accordion */
  549. $(document).on('click','.pd_qnalist .foldGroup .fold_head',function(e){
  550. if($(this).parent().hasClass('secret_qna')){
  551. //210420_수정 : dialog alert 변경.
  552. mcxDialog.alert("비밀글은 열람하실 수 없습니다.", {
  553. sureBtnText: "확인",
  554. });
  555. }else {
  556. $(this).parents('.foldGroup li').find('.fold_cont').slideToggle(100);
  557. $(this).toggleClass('on');
  558. }
  559. });
  560. });
  561. ///////////////////////////////////////////////////////
  562. // 이하 미사용 스크립트 정리예정
  563. //$( document ).ready(function() {
  564. // var footerH = $("#footer").outerHeight();
  565. // var fixedH = $(".fixed_btns").outerHeight();
  566. // var limitH = ((footerH+fixedH)-8);
  567. // uifn_bottomfloat($(".fixed_btns"), footerH);
  568. // $(window).on('scroll', function(){
  569. // uifn_bottomfloat($(".fixed_btns"), footerH);
  570. // });
  571. // uifn_popupCtr();
  572. // uifn_familyCtr();
  573. // //popup
  574. // function uifn_popupCtr() {
  575. // var popupArea = $(".popup-area");
  576. // if(popupArea.css('display') == 'block'){
  577. // popupArea.show();
  578. // document.body.classList.add("stop-scroll");
  579. // };
  580. // popupArea.find(".close").click(function(){
  581. // popupArea.css('display','none');
  582. // document.body.classList.remove("stop-scroll");
  583. // });
  584. // };
  585. // // family site
  586. // function uifn_familyCtr(){
  587. // $('.family-area').click(function(e){
  588. // $('.family-area').toggleClass('on');
  589. // });
  590. // }
  591. // // scrollTop
  592. // function uifn_bottomfloat(object, num) {
  593. // var bottom = $(document).height() - $(window).height() - $(document).scrollTop();
  594. // if (bottom > num) {
  595. // object.removeClass("off");
  596. // } else if (bottom <= num) {
  597. // object.addClass("off");
  598. // } else {
  599. // object.removeClass("off");
  600. // }
  601. // }
  602. //});