https://gosi.hackers.com/js/bxslider_ver2.js

1var __globalBxslider = {
2	bxList: [],
3	setup: function (idx, attr) {
4
5		if (attr.bxSlider) { // bxslider ÀÌ¹Ì Àû¿ëµÈ °æ¿ì return ó¸®
6			return false;
7		}
8        var $sliderWp = $(".bxslider-default");
9
10		// attr¿¡ bxslider Àû¿ë
11		var $sliderLi = $(".bxslider li", attr);
12
13		var wd = $sliderLi.width();
14
15		var isSingleImage = $sliderLi.length === 1;
16
17		var _mode = $(attr).attr("data-mode"); // ½½¶óÀ̵å È¿°ú - horizontal,vertical,fade
18		_mode = _mode ? _mode : 'horizontal';
19
20		var _maxSlides = $(attr).attr("data-maxSlides"); // ÃÖ´ë º¸¿©Áö´Â °¹¼ö
21		_maxSlides = _maxSlides && !isNaN(parseInt(_maxSlides)) ? parseInt(_maxSlides) : 1;
22
23		var _slideMargin = $(attr).attr("data-slideMargin"); // ½½¶óÀÌµå »çÀÌ margin °ª
24		_slideMargin = _slideMargin && !isNaN(parseInt(_slideMargin)) ? parseInt(_slideMargin) : 0;
25
26		var _delay = $(attr).attr("data-delay"); // ½½¶óÀÌµå µô·¹ÀÌ ¼³Á¤
27		_delay = _delay && !isNaN(parseInt(_delay)) ? parseInt(_delay) : 4000;
28
29		var _speed = $(attr).attr("data-speed"); // ½½¶óÀÌµå ¼Óµµ ¼³Á¤
30		_speed = _speed && !isNaN(parseInt(_speed)) ? parseInt(_speed) : 400;
31		
32		var _cutLimit = $(attr).attr("data-cutLimit"); // ½½¶óÀ̵å Á¦ÇÑ
33		_cutLimit = _cutLimit && !isNaN(parseInt(_cutLimit)) ? parseInt(_cutLimit) : null;
34		
35		var _autoBtn = $(attr).attr("data-autoBtn"); // play / stop / puase
36		_autoBtn = _autoBtn && _autoBtn == 'true' ? true : false;
37
38		var _auto = $(attr).attr("data-auto"); // ÀÚµ¿½½¶óÀÌµå ¿©ºÎ
39		_auto = _auto && _auto == 'true' ? true : false;
40
41		var _pager = $(attr).attr("data-pager");  // ÆäÀÌÁö µ¿±×¶õ ¹öÆ° ¼³Á¤ ¿©ºÎ
42		_pager = ( _pager && _pager == 'true' && !isSingleImage ) ? true : false;
43
44		var _pagerCustom = '.' + $(attr).attr("data-pagerCustom");  // ÆäÀÌÁö ¿ÜºÎ·Î ºüÁö°ÔÇÒ¶§
45
46		var _controls = $(attr).attr("data-controls"); //ÀÚµ¿ ½½¶óÀ̵å ÄÁÆ®·Ñ ¹öÆ° ¼³Á¤ ¿©ºÎ
47		_controls = _controls && _controls == 'true' ? true : false;
48
49		var _moves = $(attr).attr("data-moves"); //ÇÑÀ徿 ½½¶óÀ̵å
50		_moves = _moves && !isNaN(parseInt(_moves)) ? parseInt(_moves) : 1;
51
52		var _touch = $(attr).attr("data-touch"); //¸¶¿ì½º ÅÍÄ¡ ½½¶óÀÌµå »ç¿ë¿©ºÎ
53		_touch = _touch && _touch == 'true' ? true : false;
54
55		var _loop = $(attr).attr("data-loop"); //¸¶¿ì½º ÅÍÄ¡ ½½¶óÀÌµå »ç¿ë¿©ºÎ
56		_loop = _loop && _loop == 'false' ? false : true;
57
58		var _pagerType = $(attr).attr("data-pagerType");
59
60		var _info = $(attr).attr("data-info");
61
62		var li_length_num=0;
63
64		var bgCacheCheck = false,
65			bgAvailable = false,
66			bgColors = [],
67			bgTarget;
68
69		__globalBxslider.bxList[__globalBxslider.bxList.length] = attr.bxSlider = $('.bxslider', attr).bxSlider({
70			slideWidth: wd
71			, slideMargin: _slideMargin
72			, minSlides: 1
73			, maxSlides: _maxSlides // ÃÖ´ë º¸¿©Áö´Â °¹¼ö
74			, speed: _speed
75			, pause: _delay
76			, moveSlides: _moves
77			, mode: _mode // ½½¶óÀ̵å È¿°ú - horizontal,vertical,fade
78			, autoControls: _autoBtn // play / stop / puase
79			, auto: _auto // _auto // ÀÚµ¿½½¶óÀÌµå ¿©ºÎ
80			, pager: _pager
81			, pagerCustom: (_pagerCustom == '.undefined') ? '' : _pagerCustom
82			, controls: _controls
83			, touchEnabled: _touch
84			, infiniteLoop: _loop
85			, pagerType: _pagerType
86			, cutLimit: _cutLimit
87			, onSliderLoad: function (el, current, next) {
88				//¨Ð bxslider onSliderLoad À̺¥Æ® ¼öÁ¤
89				// LazyLoad ¿É¼ÇÀÌ ÄÑÁ®ÀÖÀ» °æ¿ì ½½¶óÀÌµå ³»ºÎÀÇ À̹ÌÁö´Â data-original·Î ½ÇÁ¦ ·ÎµåÇÏÁö ¾ÊÀ¸¸ç
90				// ½½¶óÀÌµå ·Îµå¿Í ½½¶óÀ̵å À̵¿ Á÷Àü¿¡ ÀڽŰú ´ÙÀ½ÀÇ À̹ÌÁö¸¦ ·ÎµåÇÑ´Ù
91				__globalBxslider.renderLazyImage(this);
92                $sliderWp.css("visibility", "visible").animate({opacity:1});
93				
94				//(ÇöÀç ½½¶óÀ̵å¼ýÀÚ/ÃÑ ½½¶óÀ̵å¼ýÀÚ) ¿¹) (2/4) ÀÌ·± Á¤º¸³ª¿À´Â°Å ºÎºÐ
95				if( _info != undefined ){
96					$(this).parents('.bxslider-default').find('.bxslider li').each(function(){
97						if( !$(this).hasClass('bx-clone') ){
98							li_length_num++
99						}
100					});
101					$('.'+_info).html('1/'+li_length_num);
102				}
103
104				// ½½¶óÀÌµå ·Îµå ÈÄ ÀÚµ¿Á¤Áö ÀÚµ¿½ÃÀÛ À̺¥Æ® ºÎ¿©
105				/* controls , pager click ÇßÀ» auto ¸ØÃß´Â Çö»ó °³¼± */
106				if (!_autoBtn) {
107					if (_auto && !isSingleImage) {
108						$(attr).on('mouseover', function () {
109
110							this.bxSlider.stopAuto()
111						});
112						$(attr).on('mouseout', function () {
113							this.bxSlider.startAuto()
114						});
115					}
116				}
117			}
118			, onSliderResize: function () {
119			} // ...
120			, onSlideBefore: function (el, current, next) {//¨Ð bxslider onSliderBefore À̺¥Æ® ¼öÁ¤
121
122				//(ÇöÀç ½½¶óÀ̵å¼ýÀÚ/ÃÑ ½½¶óÀ̵å¼ýÀÚ) ¿¹) (2/4) ÀÌ·± Á¤º¸³ª¿À´Â°Å ºÎºÐ
123				if( _info != undefined ){
124					$('.'+_info).html((next+=1)+'/'+li_length_num);
125				}
126
127				var imageLoad = __globalBxslider.renderLazyImage(this, current, next);
128				if (!imageLoad) {
129					return false;

130				}
131
132				// ¹é±×¶ó¿îµå ¼¼ÆÃ
133				if (!bgCacheCheck) {
134					bgCacheCheck = true;
135
136					var $bxsliderDefault = $(el).closest('.bxslider-default');
137					if (!$bxsliderDefault.hasClass('bxslider-bgcolor')) {
138						bgAvailable = false;
139						return;
140					}
141					$sliderLi.each(function () {
142						var color = $(this).css('backgroundColor');
143						bgColors.push(color);
144						if (!bgAvailable && color != 'rgba(0, 0, 0, 0)' && color != 'rgb(0, 0, 0)') {
145							bgAvailable = true;
146						}
147					});
148					bgTarget = $(el).closest('.bxslider-default').parent().parent();
149				}
150
151				if (bgAvailable && bgTarget) {
152					this.speed = 0;
153					bgTarget.css({
154						'backgroundColor': bgColors[next]
155					});
156				}
157			}
158			//infiniteLoop: false
159		});
160		return true; // ½½¶óÀ̵尡 Á¤»óÀûÀ¸·Î ÃʱâÈ­
161	},
162	startAuto: function () {
163		this.bxSlider.startAuto();
164	},
165	stopAuto: function () {
166		this.bxSlider.stopAuto();
167	},
168	resize: function () {
169		for (var i in this.bxList) {
170			if ($.isNumeric(i) === false)
171				continue;
172			try {
173				this.bxList[i].redrawSlider();
174			}
175			catch (e) {
176				console.warn('Should Remove Legacy Code in bxslider.js');
177			}
178		}
179	},
180	init: function (selector) { // ¨Ï _globalBxslider.init ÇÔ¼ö º¯°æ
181		var _this = this;
182		$(selector).each(function (idx, slider) {
183			var sliderObj = $(slider);
184
185			// ºê¶ó¿ìÀú/¸ð¹ÙÀÏ viewport °è»ê ¹®Á¦·Î visible Á¶°Ç Á¦°Å
186			// if (sliderObj.hasClass('loaded') || !sliderObj.visible(true)) {
187			if (sliderObj.hasClass('loaded')) {
188				return true;
189			}
190
191			var lazyImage = sliderObj.find('.slider-lazy-image');
192			if (lazyImage.length > 0) {
193				var img = lazyImage.eq(0);
194				_this.renderImage(img);
195				// IE7,8Àº ij½ÌµÈ À̹ÌÁö¸¦ ·ÎµåÇÒ°æ¿ì load À̺¥Æ®°¡ ¹ß»ýÇÏÁö ¾ÊÀ½
196				// À̹ÌÁöÀÇ state¸¦ üũÈÄ ¿Ï·á»óŶó¸é À̺¥Æ®¸¦ °Ç³Ê¶Ù°í ÃʱâÈ­ ½ÇÇà
197				if (img.get(0).readyState && img.get(0).readyState == 'complete') {
198					__globalBxslider.setup(idx, slider);
199				} else {
200					img.one('load', function () {
201						var imgObj = this;
202						if (this.readyState) { // IE7,8 ÃʱâÈ­
203							var loadInterval = setInterval(function () {
204								if (imgObj.readyState == 'complete') {
205									__globalBxslider.setup(idx, slider);
206									clearInterval(loadInterval);
207								}
208							}, 250);
209						} else { // ¸ð´øºê¶ó¿ìÀú ÃʱâÈ­
210							__globalBxslider.setup(idx, slider);
211						}
212					});
213				}
214			} else {
215				__globalBxslider.setup(idx, slider);
216			}
217			sliderObj.css("overflow", "visible").addClass('loaded');
218		});
219	},
220	reloadSlider: function ($el) {
221		var _this = this;
222		$el.each(function (i, $this) {
223			var idx = parseInt($('.bxslider-default').index($this));
224			_this.bxList[idx].reloadSlider();
225		});
226	},
227	renderImage: function (obj) {
228		var img = $(obj);
229		if (!img.hasClass('slider-lazy-image')) {
230			return false;
231		}
232		var imgUrl = img.attr('data-original');
233		img.attr('src', imgUrl).removeClass('slider-lazy-image');
234		return true;
235
236	},
237	renderLazyImage: function (slideObj, current, next) { // ¨Ñ__globalBxslider.renderLazyImage ÇÔ¼ö Ãß°¡
238
239		var _this = this;
240		var context = $(slideObj.context);
241		var slidePerMove = context.attr('data-moves') || 1;
242		var visibleSlideCount = context.attr('data-maxslides') || 1;
243
244		var preRenderRange = visibleSlideCount;
245		var slideCount = slideObj.getSlideCount();
246		var currentSlideIdx = slideObj.getCurrentSlide();
247
248		// º¸¿©Áú ´ÙÀ½ ½½¶óÀ̵åÀÇ À̹ÌÁö ·»´õ¸µ
249		for (var i = 0; i < preRenderRange; i++) {
250			var slideIdx = currentSlideIdx + i;
251			if (slideIdx + 1 > slideCount) {
252				slideIdx = slideIdx - slideCount;
253			}
254			var nextElem = slideObj.getSlideElement(slideIdx);
255			nextElem.find('.slider-lazy-image').each(function () {
256				_this.renderImage(this);
257			});
258		}
259
260		if (current === undefined || next === undefined) return;
261
262		// ½½¶óÀ̵å È¿°ú°¡ À̵¿ÀÏ °æ¿ì »ý¼ºµÇ´Â bx-clone ¿µ¿ªÀÇ À̹ÌÁö ·»´õ¸µ
263		context.find('.bx-clone').each(function () {
264			$(this).find('.slider-lazy-image').each(function () {
265				_this.renderImage(this);
266			});
267		});
268
269		var imgLoad = true;
270		for (var i = current; i < ((next + 1) * slidePerMove); i++) {
271			var sliderElem = $(slideObj.getSlideElement(i));
272			sliderElem.find('img').each(function () {
273				_this.renderImage(this);
274				// À̹ÌÁö°¡ ·ÎµåµÇÁö ¾Ê¾Ò°í IE7,8 ȯ°æÀÌ ¾Æ´Ò¶§¸¸ À̹ÌÁö ·Îµå ´ë±â ó¸®
275				if (!this.complete && !this.readyState) {
276					$(this).one('load', function () {
277						if (this.complete) {
278							slideObj.goToSlide(next);
279						}
280					});
281					imgLoad = false;

282				}
283			});
284		}
285		return imgLoad;
286	}
287};
288
289// BXSLIDER-DEFAULT ÃʱâÈ­ ¿¹¿ÜÁ¶°Ç
290// ´ÙÀ½ Ŭ·¡½º°¡ Á¸ÀçÇÑ´Ù¸é ÃʱâÈ­ÇÏÁö ¾Ê´Â´Ù
291var exceptElements = [
292	'.loaded',
293	'.top_open_box',
294	'.ly_movie_bx'
295];
296var sliderObserver = null;
297$(function () {
298
299	// ¨Î document load°¡ ¾Æ´Ñ window ·Îµå ÀÌÈÄ ½½¶óÀ̵å ÀÛµ¿½ÃÀÛ
300	// IntersectionObserver Ŭ·¡½º Áö¿ø¿©ºÎ È®ÀÎ
301	if (typeof IntersectionObserver !== 'undefined') {
302		$(window).on('load', function () {
303			sliderObserver = new IntersectionObserver(function (entries) {
304				for (var i in entries) {
305					var entry = entries[i];
306					if (entry.isIntersecting) {
307						var slideObj = $(entry.target).get(0);
308						__globalBxslider.init(slideObj);
309					}
310				}
311			}, {root: null});
312			$('.bxslider-default').not(exceptElements.join(',')).each(function () {
313				sliderObserver.observe(this);
314			});
315		});
316	} else {
317		$(window).on('load scroll', function () {
318			__globalBxslider.init($('.bxslider-default').not(exceptElements.join(',')));
319		});
320	}
321
322	$(window).on('load', function () {
323		/* tab ³»ºÎ¿¡ bxslider°¡ ÀÖÀ»¶§ »ç¿ë */
324		$('[class*="js-tab"] a[href*="#"]').on('click', function () {
325			__globalBxslider.resize()
326		});
327		$('[class*="js-tab-type1"] a[href*="#"]').on('click', function () {
328			__globalBxslider.resize()
329		});
330		$('[class*="js-tab-type2"] a[href*="#"]').on('click', function () {
331			__globalBxslider.resize()
332		});
333		$('[class*="js-tab-type3"] a[href*="#"]').on('click', function () {
334			__globalBxslider.resize()
335		});
336	});
337	// ¨Î document load°¡ ¾Æ´Ñ window ·Îµå ÀÌÈÄ ½½¶óÀ̵å ÀÛµ¿ ³¡
338
339	$(window).trigger('old-tab');
340});
341
342
343// ¨Í $.fn.visible Jquery »ç¿ëÀÚ ÇÔ¼ö Ãß°¡½ÃÀÛ
344(function ($) {
345
346	/**
347	 * JQUERY °´Ã¼ È­¸é³ëÃâ¿©ºÎ °Ë»ç
348	 */
349	var $w = $(window);
350	$.fn.visible = function (partial, hidden, direction, container) {
351
352		// IE7/8Àº Á¤»óÀûÀ¸·Î °è»êÀÌ ºÒ°¡ÇϹǷΠÇ×»ó º¸ÀÌ´Â »óÅ·Πó¸®
353		var userAgent = navigator.userAgent;
354		if (userAgent.indexOf('MSIE 7') > 0 || userAgent.indexOf('MSIE 8') > 0) {
355			return true;
356		}
357
358		if (this.length < 1) return false;
359
360		var result = true;
361		if (typeof IntersectionObserver !== 'undefined') { // Class base viewportüũ´Â ÀÌÀü°úÁ¤¿¡¼­ üũ
362			return true;
363		} else {    // Window Base
364			// Set direction default to 'both'.
365			direction = direction || 'both';
366
367			var $t = this.length > 1 ? this.eq(0) : this,
368				isContained = typeof container !== 'undefined' && container !== null,
369				$c = isContained ? $(container) : $w,
370				wPosition = isContained ? $c.position() : 0,
371				t = $t.get(0),
372				vpWidth = $c.outerWidth(),
373				vpHeight = $c.outerHeight(),
374				clientSize = hidden === true ? t.offsetWidth * t.offsetHeight : true;
375
376			if (typeof t.getBoundingClientRect === 'function') {
377
378				// Use this native browser method, if available.
379				var rec = t.getBoundingClientRect(),
380					tViz = isContained ?
381						rec.top - wPosition.top >= 0 && rec.top < vpHeight + wPosition.top :
382						rec.top >= 0 && rec.top < vpHeight,
383					bViz = isContained ?
384						rec.bottom - wPosition.top > 0 && rec.bottom <= vpHeight + wPosition.top :
385						rec.bottom > 0 && rec.bottom <= vpHeight,
386					lViz = isContained ?
387						rec.left - wPosition.left >= 0 && rec.left < vpWidth + wPosition.left :
388						rec.left >= 0 && rec.left < vpWidth,
389					rViz = isContained ?
390						rec.right - wPosition.left > 0 && rec.right < vpWidth + wPosition.left :
391						rec.right > 0 && rec.right <= vpWidth,
392					vVisible = partial ? tViz || bViz : tViz && bViz,
393					hVisible = partial ? lViz || rViz : lViz && rViz,
394					vVisible = (rec.top < 0 && rec.bottom > vpHeight) ? true : vVisible,
395					hVisible = (rec.left < 0 && rec.right > vpWidth) ? true : hVisible;
396
397				if (direction === 'both')
398					result = clientSize && vVisible && hVisible;
399				else if (direction === 'vertical')
400					result = clientSize && vVisible;
401				else if (direction === 'horizontal')
402					result = clientSize && hVisible;
403			} else {
404				var viewTop = isContained ? 0 : wPosition,
405					viewBottom = viewTop + vpHeight,
406					viewLeft = $c.scrollLeft(),
407					viewRight = viewLeft + vpWidth,
408					position = $t.position(),
409					_top = position.top,
410					_bottom = _top + $t.height(),
411					_left = position.left,
412					_right = _left + $t.width(),
413					compareTop = partial === true ? _bottom : _top,
414					compareBottom = partial === true ? _top : _bottom,
415					compareLeft = partial === true ? _right : _left,
416					compareRight = partial === true ? _left : _right;
417
418				if (direction === 'both')
419					result = !!clientSize && ((compareBottom <= viewBottom) && (compareTop >= viewTop)) && ((compareRight <= viewRight) && (compareLeft >= viewLeft));
420				else if (direction === 'vertical')
421					result = !!clientSize && ((compareBottom <= viewBottom) && (compareTop >= viewTop));
422				else if (direction === 'horizontal')
423					result = !!clientSize && ((compareRight <= viewRight) && (compareLeft >= viewLeft));
424			}
425			return result;
426		}
427
428	};
429
430})(jQuery);
431// ¨Í $.fn.visible Jquery »ç¿ëÀÚ ÇÔ¼ö Ãß°¡³¡