https://lh.or.kr/jquery/js/default.js?20261001202957

1/*-------------------------------------------------
2title       : 공통
3Author      : PLAN I
4Create date : 2023-01-01
5-------------------------------------------------*/
6
7$(function()
8{
9    /*------------------------------------------------- 레이어팝업 -------------------------------------------------*/
10
11    // 닫기
12    $('[id*="layerPopup"]').find('.close a').on('click', function()
13    {
14        $(this).parents('[id*="layerPopup"]').hide();
15
16        return false;
17    });
18
19    // 팝업에서 키보드가 나갔을 때 팝업 닫음(접근성)
20    $('[id*="layerPopup"]').find('*:last').keydown(function(e) 
21    {
22        if(e.keyCode === 9) 
23        {
24            $(this).parents('[id*="layerPopup"]').hide();
25        }
26    });
27
28    /*------------------------------------------------- //레이어팝업 -------------------------------------------------*/
29
30    // 모달팝업, 최상단배너 열기 닫기 버튼 클릭 시
31    $('#issue, .topbanner').find('a.control').on('click', function()
32    {
33        // 열기 눌렀을 때
34        if ( $(this).hasClass('open') == true )
35        {
36            // 안 열려있을 때
37            if ( $(this).parents('#issue, .topbanner').hasClass('active') == false )
38            {
39                $(this).parents('#issue, .topbanner').addClass('active');
40                $(this).find('.sr_only').text('닫기');
41
42                // 모달팝업 일 때
43                if ( $(this).parents('#issue').length == 1 )
44                {   
45                    modalpopup.slideTo(0);
46                    modalpopup.autoplay.start();
47
48                    swiperdisable('#issue');
49                }
50                else
51                {
52                    topbanner.slideTo(2);
53                    topbanner.autoplay.start();
54                }           
55            }
56            // 열려있을 때
57            else
58            {
59                $(this).parents('#issue, .topbanner').removeClass('active');
60                $(this).find('.sr_only').text('열기');
61
62                // 모달팝업 일 때
63                if ( $(this).parents('#issue').length == 1 )
64                {                
65                    modalpopup.autoplay.stop();
66                    modalpopup.slideTo(0);
67
68                    $('#issue').removeClass('type1');
69                }
70                else
71                {
72                    topbanner.autoplay.stop();
73
74                    setTimeout(function()
75                    {
76                        topbanner.slideTo(2);
77
78                    }, 200);  
79                }
80            }
81        }
82        else
83        {
84            $(this).parents('#issue, .topbanner').removeClass('active');
85            $('#issue').removeClass('type1');
86            $(this).parents('#issue, .topbanner').find('.open').find('.sr_only').text('열기');
87
88            // 모달팝업 일 때
89            if ( $(this).parents('#issue').length == 1 )
90            {                
91                modalpopup.autoplay.stop();
92                modalpopup.slideTo(0);
93            }
94            else
95            {
96                topbanner.autoplay.stop();
97
98                setTimeout(function()
99                {
100                    topbanner.slideTo(2);
101
102                }, 200);                
103            }
104        }
105
106        return false;
107    });
108
109    // 컨트롤러 추가
110    $('#issue, .topbanner').find('.list').after('<div class="control"><button class="prev">이전</button><button class="next">다음</button><button class="play">재생</button><button class="pause active">정지</button><div class="pager"></div></div>');
111
112    /*------------------------------------------------- 모달팝업 -------------------------------------------------*/
113
114    // 스와이퍼
115    var modalpopup = new Swiper("#issue .group", 
116    {
117        autoplay                : 
118        {
119            delay               : 2500,
120            disableOnInteraction: false,
121        },
122        wrapperClass            : "list",
123        slideClass              : "list > li",
124        slidesPerView           : 1,
125        spaceBetween            : 10,
126        loop                    : false,
127        navigation              : 
128        {
129            nextEl              : "#issue .next",
130            prevEl              : "#issue .prev",
131        },
132        pagination              : 
133        {
134            el                  : "#issue .pager",
135            clickable           : true,
136        },
137        breakpoints             : 
138        {
139            769 : 
140            {
141                slidesPerView   : 3,
142                spaceBetween    : 30,
143            },
144            581 : 
145            {                    
146                slidesPerView   : 2,
147                spaceBetween    : 20,
148            }
149        }
150    });

151
152    // 스와이퍼 옵션
153    swiperoption('#issue', modalpopup, '.open strong.count, .label .count');
154
155    // 모달팝업에서 키보드가 나갔을 때 팝업 닫음(탭 아웃-접근성)
156    $('#issue').find('a:last').keydown(function(e) 
157    {
158        if ( $(this).parents('#issue').hasClass('active') == true )
159        {
160            if(e.keyCode === 9) 
161            {
162                $(this).parents('#issue').removeClass('active');
163            }
164        }
165    });
166
167    // 모달팝업에서 키보드가 나갔을 때 팝업 닫음(역탭 아웃-접근성)
168    $('#issue').find('a:first').keydown(function(e) 
169    {
170        if(e.keyCode === 9 && e.shiftKey) 
171        {
172            if ( $(this).parents('#issue').hasClass('active') == true )
173            {
174                $(this).parents('#issue').removeClass('active');
175            }
176        }
177    });
178
179    /*------------------------------------------------- //모달팝업 -------------------------------------------------*/
180
181    /*------------------------------------------------- 최상단배너 -------------------------------------------------*/
182
183    var topbanner = new Swiper(".topbanner .group", 
184    {
185        autoplay                : 
186        {
187            delay               : 4000,
188            disableOnInteraction: false,
189        },
190        wrapperClass            : "list",
191        slideClass              : "list > li",
192        direction               : "vertical",
193        loop                    : this.SwiperLength > 1,
194        navigation              : 
195        {
196            nextEl              : ".topbanner .next",
197            prevEl              : ".topbanner .prev",
198        },
199        pagination              : 
200        {
201            el                  : ".topbanner .pager",
202            clickable           : true,
203        },
204    });
205
206    // 슬라이드 한개 이하일 경우 컨트롤 버튼 감추기
207    if($(".topbanner .list > li").length <= 1){
208        $(".topbanner .control:not(.close)").hide();
209    }
210
211    swiperoption('.topbanner', topbanner, '.open strong.count');
212
213    /*------------------------------------------------- //최상단배너 -------------------------------------------------*/
214});
215
216// 스와이퍼 관련
217function swiperoption(target, swiper, count) {
218    // 목록 수
219    $(target).find(count).text($(target).find('.list li').length - $(target).find('.list .swiper-slide-duplicate').length);
220
221    // 열기 버튼에 링크텍스트 추가
222    if ($(target).hasClass('active') == true) {
223        $(target).find('.open').append('<span class="sr_only">닫기</span>');
224    }
225    else {
226        $(target).find('.open').append('<span class="sr_only">열기</span>');
227    }
228
229    // 모달팝업, 최상단배너 재생/정지
230    $(target).find('.play, .pause').on('click', function () {
231        if ($(this).hasClass('play') == true) {
232            swiperplay();
233        }
234        else {
235            swiperpause();
236        }
237    });
238
239    // 스와이퍼 안에 초점 있을 때 자동재생 정지(접근성)
240    $(target).find('.list *').on
241        ({
242            focusin: function () {
243                swiperpause()
244            },
245            // mouseover: function () {
246            //     swiperpause();
247            // },
248            focusout: function () {
249                swiperplay();
250            },
251            // mouseleave: function () {
252            //     swiperplay();
253            // },
254        });
255
256    // 정지
257    function swiperpause() {
258        swiper.autoplay.stop();
259
260        $(target).find('.control button').removeClass('active');
261        $(target).find('.play').addClass('active');
262    }
263
264    // 재생
265    function swiperplay() {
266        swiper.autoplay.start();
267
268        $(target).find('.control button').removeClass('active');
269        $(target).find('.pause').addClass('active');
270    }
271
272    // 버튼 비활성화 될 때 슬라이드에 클래스 추가
273    $(window).on('load resize', function () {
274        swiperdisable(target);
275    });

276}
277
278// 스와이퍼 슬라이드 안 될 때 클래스 추가
279function swiperdisable(target) {
280    setTimeout(function () {
281        if ($(target).find('.prev, next').hasClass('swiper-button-lock') == true) {
282            $(target).addClass('type1');
283        }
284        else {
285            $(target).removeClass('type1');
286        }
287
288    }, 100);
289}